1186

मेरे पास एक तत्व है जो पहले से ही एक वर्ग है:

<div class="someclass">
    <img ... id="image1" name="image1" />
</div>

अब मैं एक जावास्क्रिप्ट फंक्शन बनाना चाहता हूँ जो एक क्लास को जोड़ेगा div(रिप्लेस नहीं, बल्कि ऐड)।

मैं उसे कैसे कर सकता हूँ?

javascript css dom-manipulation

— Blankman
स्रोत

9

2020 या बाद में इस थ्रेड को पढ़ने वाले किसी भी व्यक्ति के लिए, पुराने क्लासनाम विधि को छोड़ दें और element.classList.add("my-class")इसके बजाय उपयोग करें ।

— पीकमेंडर

1917

यदि आप केवल आधुनिक ब्राउज़रों को लक्षित कर रहे हैं:

एक वर्ग जोड़ने के लिए element.classList.add का उपयोग करें :

element.classList.add("my-class");

और element.classList.remove को हटाने के लिए एक वर्ग:

element.classList.remove("my-class");

यदि आपको Internet Explorer 9 या उससे कम समर्थन की आवश्यकता है:

classNameतत्व की संपत्ति में अपने नए वर्ग के नाम के अलावा एक स्थान जोड़ें । सबसे पहले, एक idतत्व डालें, ताकि आप आसानी से एक संदर्भ प्राप्त कर सकें।

<div id="div1" class="someclass">
    <img ... id="image1" name="image1" />
</div>

फिर

var d = document.getElementById("div1");
d.className += " otherclass";

अंतरिक्ष से पहले ध्यान दें otherclass। अंतरिक्ष को शामिल करना महत्वपूर्ण है अन्यथा यह मौजूदा वर्गों से समझौता करता है जो वर्ग सूची में इसके पहले आते हैं।

MDN पर element.className भी देखें ।

— इश्माएल
स्रोत

26

यदि पूरे पृष्ठ पर एकमात्र काम जिसे जावास्क्रिप्ट के साथ करने की आवश्यकता है, तो यह वर्ग नाम जोड़ है, तो हाँ। लेकिन मैं इसे पृष्ठ का एकमात्र गतिशील हिस्सा नहीं देख सकता। एक पुस्तकालय सब कुछ के साथ-साथ मदद करेगा। 30-50kb पर jQuery मुश्किल से चर्चा के लायक है।

— rfunduk

167

जावास्क्रिप्ट सीखने से अलग - "एक पुस्तकालय और सब कुछ के साथ-साथ में मदद मिलेगी"

— meouw

19

भाषा सीखने के साथ एक DOM तत्व में एक वर्ग को जोड़ने का क्या करना है? document.getElementById ('div1')। className एक पुस्तकालय से संबंधित समस्या है जो jQuery का उपयोग करने के लिए समान है। सवाल था "मैं ऐसा कैसे कर सकता हूं", एक अच्छी तरह से परीक्षण की गई लाइब्रेरी समझदार उत्तर है।

— rfunduk

6

@thenduks: मुझे यकीन है कि आप जानते हैं कि जावास्क्रिप्ट! == jQuery। यह अच्छी बात है कि इस प्रश्न के उत्तर में पुस्तकालय और गैर-पुस्तकालय समाधान शामिल हैं क्योंकि यह जानना महत्वपूर्ण है कि कैसे चीजें उन्हें पूरा करने का सबसे सरल तरीका नहीं है। आप इस प्रश्न को जावास्क्रिप्ट के रूप में चिह्नित करते हैं, नोटिस करेंगे

— मुझे २३

2

@meouw: मैं आपसे सहमत हूँ। jQuery जावास्क्रिप्ट में लिखा है , हालांकि, इसलिए मैं ओपी का उल्लेख करते हुए कहता हूं कि एक पुस्तकालय एक अच्छा विचार है कि 'उसके [गले] के नीचे एक ढाँचा नहीं है। बस इतना ही।

— rfunduk

1350

बिना किसी फ्रेमवर्क के ऐसा करने का सबसे आसान तरीका है एलिमेंट .classList.add मेथड।

var element = document.getElementById("div1");
element.classList.add("otherclass");

संपादित करें: और यदि आप किसी तत्व से कक्षा हटाना चाहते हैं -

element.classList.remove("otherclass");

मैं किसी भी खाली जगह और डुप्लिकेट प्रविष्टि को खुद से जोड़ना पसंद नहीं करता हूं (जो document.classNameदृष्टिकोण का उपयोग करते समय आवश्यक है )। कुछ ब्राउज़र सीमाएँ हैं , लेकिन आप पॉलीफ़िल का उपयोग करके उनके आसपास काम कर सकते हैं ।

— यूरी
स्रोत

67

यह शर्म की बात है कि यह IE 10.0 से पहले समर्थित नहीं है क्योंकि यह एक उत्कृष्ट विशेषता है और एक समस्या का सबसे आसान समाधान है जो मैं अक्सर भर में आता हूं।

— म्रिस्की

12

क्लासिस्ट के लिए एक पॉलीफिल उपलब्ध है।

— wcandillon

10

element.classList MDN पर डॉक्स ।

— विलमा

11

यह एक का उपयोग करने के लिए सबसे अच्छा लगता है, क्योंकि अंतरिक्ष वाले कम से कम हैक्स की तरह महसूस करते हैं - कक्षाओं को जोड़ने के लिए

— मानसिक

5

@SilverRingvee अंतरिक्ष दृष्टिकोण का एक और जोखिम यह है कि कुछ अन्य डेवलपर यह नहीं जान सकते हैं कि यह महत्वपूर्ण है, और चीजों को साफ करने के लिए इसे हटा दें।

— अंकुपी

178

अपने लक्ष्य तत्व को खोजें "d" हालाँकि आप चाहें और फिर:

d.className += ' additionalClass'; //note the space

आप पूर्व-अस्तित्व की जांच करने के लिए और अंतरिक्ष आवश्यकताओं आदि के लिए जाँच करने के लिए चतुर तरीकों में लपेट सकते हैं।

— annakata
स्रोत

और इस विधि का उपयोग करने के लिए निकालने के लिए?

— डेथग्रिप

3

@DeathGrip ने वर्ग को एक एकल परिभाषित नाम d.className = 'originalClass' पर वापस सेट किया;

— द टेची

@ Theechy - यदि आपके पास एक से अधिक वर्ग रखने की आवश्यकता है (जो इन दिनों बहुत होता है), तो यह काम नहीं करेगा।

— मार्क शुल्त्स

1

पुराने जमाने के तरीके को हटाने के लिए, splitव्हॉट्सएप पर क्लासनाम, आप जिसके परिणामस्वरूप सरणी से नहीं चाहते हैं, उसे हटा दें, फिर फिर joinसे सरणी ... या उपयोग करें element.classList.remove।

— १०:४१ पर स्टिज डे विट

131

क्लास जोड़ें

क्रॉस संगत

निम्न उदाहरण में हम एक जोड़ने classnameके लिए <body>तत्व। यह IE-8 संगत है।
```
var a = document.body;
a.classList ? a.classList.add('classname') : a.className += ' classname';
```
यह निम्नलिखित के लिए आशुलिपि है।
```
var a = document.body;
if (a.classList) {
    a.classList.add('wait');
} else {
    a.className += ' wait';
}
```

प्रदर्शन

यदि क्रॉस-कम्पैटिबिलिटी से अधिक आपके प्रदर्शन का संबंध है तो आप इसे निम्न प्रकार से छोटा कर सकते हैं जो 4% तेज है।
```
var z = document.body;
document.body.classList.add('wait');
```

सुविधा

वैकल्पिक रूप से आप jQuery का उपयोग कर सकते हैं लेकिन परिणामी प्रदर्शन काफी धीमा है। JsPerf के अनुसार 94% धीमा
```
$('body').addClass('wait');
```

कक्षा को हटाना

प्रदर्शन

यदि आपके प्रदर्शन से संबंधित है तो किसी वर्ग को हटाने के लिए jQuery का चयन करना सबसे अच्छा तरीका है
```
var a = document.body, c = ' classname';
$(a).removeClass(c);
```

JQuery के बिना यह 32% धीमा है

var a = document.body, c = ' classname';
a.className = a.className.replace( c, '' );
a.className = a.className + c;

संदर्भ

प्रोटोटाइप का उपयोग करना

Element("document.body").ClassNames.add("classname")
Element("document.body").ClassNames.remove("classname")
Element("document.body").ClassNames.set("classname")

YUI का उपयोग करना

YAHOO.util.Dom.hasClass(document.body,"classname")
YAHOO.util.Dom.addClass(document.body,"classname")
YAHOO.util.Dom.removeClass(document.body,"classname")

— davidcondrey
स्रोत

वाह धन्यवाद :) शॉर्टहैंड संस्करण ( a.classList ? ...) में सामान्य एक ( if (a.classList) { ....) की तुलना में कोई गति अंतर होगा ?

— विल्फ

5

ओलसो है classList.remove()। आपने इसका उपयोग क्यों नहीं किया? यह jQuery के jsperf.com/remove-class-vanilla-vs-jquery

— Fez Vrasta

@FezVrasta classList IE 10 से पहले समर्थित नहीं है, जिसमें अभी भी एक अच्छी बाजार हिस्सेदारी है (netmarkets.com.com पर + 13%)।

— एडम

6

@ एडम वह classListकक्षाओं को हटाने के लिए छोड़कर सब कुछ करता था, यही कारण है कि मैं इसे पूछ रहा हूं।

— फ़ेज़ वर्स्टा

@FezVrasta क्रॉस संगत के तहत मैंने .add () का उपयोग किया था, लेकिन केवल यह देखने के लिए कि क्या यह उपलब्ध है, जांचने के बाद ही संगत करें । हटाने के लिए मैंने खुद को दोहराने की जहमत नहीं उठाई इसलिए मैंने कई विकल्पों को शामिल नहीं किया।

— डेविडकॉन्ड्रे

33

शुद्ध जावास्क्रिप्ट का उपयोग करके कक्षा को जोड़ने के लिए एक और दृष्टिकोण

वर्ग जोड़ने के लिए:

document.getElementById("div1").classList.add("classToBeAdded");

कक्षा हटाने के लिए:

document.getElementById("div1").classList.remove("classToBeRemoved");

— शोएब चिकते
स्रोत

4

यह पहले से ही कई बार अन्य उपयोगकर्ताओं द्वारा उत्तर दिया गया है, जिसमें ब्राउज़र समर्थन और शिम की चर्चा शामिल है।

— बेफॉर्मा

@bafromca मैंने यह नहीं देखा कि पिछला उत्तर दिया गया था और मेरी गलती थी। आप इस उत्तर को फ़्लैग कर सकते हैं

— शोएब चिकते

3

@ ShoaibChikate: यदि आप चाहें तो उत्तर को हटा भी सकते हैं (आप अंक रखेंगे)। बस इस सवाल पर अव्यवस्था को कम करने की कोशिश कर रहा है; पूरी तरह से आप पर।

— डेन डैस्कलेस्कु

22

जब मैं जो काम कर रहा हूं, वह पुस्तकालय का उपयोग करके वारंट नहीं करता है, तो मैं इन दो कार्यों का उपयोग करता हूं:

function addClass( classname, element ) {
    var cn = element.className;
    //test for existance
    if( cn.indexOf( classname ) != -1 ) {
        return;
    }
    //add a space if the element already has class
    if( cn != '' ) {
        classname = ' '+classname;
    }
    element.className = cn+classname;
}

function removeClass( classname, element ) {
    var cn = element.className;
    var rxp = new RegExp( "\\s?\\b"+classname+"\\b", "g" );
    cn = cn.replace( rxp, '' );
    element.className = cn;
}

— meouw
स्रोत

15

if( cn.indexOf( classname ) != -1 ) { return; } खबरदार कि अगर आप वर्ग "btn" को वर्ग "btn-info" के साथ पहले से ही यहाँ जोड़ रहे हैं, तो यह विफल हो जाता है।

— अलेक्जेंड्रे डाईलुओट

1

आपको element.className.split(" ");यहाँ बताई गई समस्या @AlexandreDieulot को रोकने के लिए उपयोग करना चाहिए ।

— अमीर फू

20

यह मानते हुए कि आप केवल इस एक वर्ग को जोड़ने से अधिक कर रहे हैं (उदाहरण के लिए, आपको अतुल्यकालिक अनुरोध और इसी तरह से चल रहे हैं), मैं एक पुस्तकालय की सिफारिश करूँगा जैसे कि प्रोटोटाइप या jQuery ।

यह आपको बस (इसके सहित) बहुत सरल करने की आवश्यकता के बारे में सब कुछ कर देगा।

तो मान लें कि अब आपको अपने पृष्ठ पर jQuery मिल गया है, आप एक तत्व में एक वर्ग का नाम जोड़ने के लिए इस तरह कोड का उपयोग कर सकते हैं (लोड पर, इस मामले में):

$(document).ready( function() {
  $('#div1').addClass( 'some_other_class' );
} );

की जाँच करें jQuery एपीआई ब्राउज़र अन्य सामान के लिए।

— rfunduk
स्रोत

15

आप क्लास को किसी तत्व से जोड़ने / हटाने के लिए classList.add OR classList.remove विधि का उपयोग कर सकते हैं।

var nameElem = document.getElementById("name")
nameElem.classList.add("anyclss")

उपरोक्त कोड nameElem में एक वर्ग "anyclass" जोड़ देगा (और प्रतिस्थापित नहीं करेगा)। इसी तरह आप क्लास हटाने के लिए classList.remove () विधि का उपयोग कर सकते हैं।

nameElem.classList.remove("anyclss")

— एस जेवी
स्रोत

बहुत अच्छा है, लेकिन IE <= 9 या सफारी में समर्थित नहीं है <= 5.0 ... :( ( caniuse.com/classlist )

— simon

1

यह पहले से ही चर्चा में रहा है , जिसमें ब्राउज़र समर्थन भी शामिल है।

— डैन डेस्केल्सकू

10

एक तत्व में एक अतिरिक्त वर्ग जोड़ने के लिए:

मौजूदा मानों को हटाने / प्रभावित किए बिना किसी तत्व में एक वर्ग जोड़ने के लिए, एक स्थान और नए वर्गनाम को जोड़ दें, जैसे:

document.getElementById("MyElement").className += " MyClass";

एक तत्व के लिए सभी वर्गों को बदलने के लिए:

सभी मौजूदा कक्षाओं को एक या अधिक नई कक्षाओं से बदलने के लिए, क्लासनाम विशेषता सेट करें:

document.getElementById("MyElement").className = "MyClass";

(आप कई कक्षाओं को लागू करने के लिए एक स्थान-सीमांकित सूची का उपयोग कर सकते हैं।)

— मो
स्रोत

6

यदि आप jQuery का उपयोग नहीं करना चाहते हैं और पुराने ब्राउज़रों का समर्थन करना चाहते हैं:

function addClass(elem, clazz) {
    if (!elemHasClass(elem, clazz)) {
        elem.className += " " + clazz;
    }
}

function elemHasClass(elem, clazz) {
    return new RegExp("( |^)" + clazz + "( |$)").test(elem.className);
}

— फेरन मायलिनच
स्रोत

5

मुझे पता है कि IE9 आधिकारिक तौर पर शटडाउन है और हम इसे element.classListऊपर बताए अनुसार हासिल कर सकते हैं, लेकिन मैंने सिर्फ यह सीखने की कोशिश की कि यह बिना कैसे काम करता हैclassList ऊपर दिए गए कई उत्तरों की मदद के है।

नीचे दिए गए कोड ऊपर दिए गए कई उत्तरों को बढ़ाते हैं और डुप्लीकेट कक्षाओं को जोड़ने से बचाते हैं।

function addClass(element,className){
  var classArray = className.split(' ');
  classArray.forEach(function (className) {
    if(!hasClass(element,className)){
      element.className += " "+className;
    }
  });            
}
//this will add 5 only once
addClass(document.querySelector('#getbyid'),'3 4 5 5 5');

— Yuvaraj
स्रोत

5

मुझे भी लगता है कि सबसे तेज़ तरीका एलीट 5 में एलिमेंट.प्रोटोटाइप.क्लासलिस्ट का उपयोग करना है: document.querySelector(".my.super-class").classList.add('new-class') लेकिन आईई 8 में एलीमेंट.प्रोटोटाइप.क्लासलिस्ट जैसी कोई चीज़ नहीं है, वैसे भी आप इसे इस स्निपेट के साथ पॉलीफ़िल कर सकते हैं (इसे संपादित करने और इसे बेहतर बनाने के लिए स्वतंत्र रूप से ):

if(Element.prototype.classList === void 0){
	function DOMTokenList(classes, self){
		typeof classes == "string" && (classes = classes.split(' '))
		while(this.length){
			Array.prototype.pop.apply(this);
		}
		Array.prototype.push.apply(this, classes);
		this.__self__ = this.__self__ || self
	}

	DOMTokenList.prototype.item = function (index){
		return this[index];
	}

	DOMTokenList.prototype.contains = function (myClass){
		for(var i = this.length - 1; i >= 0 ; i--){
			if(this[i] === myClass){
				return true;
			}
		}
		return false
	}

	DOMTokenList.prototype.add = function (newClass){
		if(this.contains(newClass)){
			return;
		}
		this.__self__.className += (this.__self__.className?" ":"")+newClass;
		DOMTokenList.call(this, this.__self__.className)
	}

	DOMTokenList.prototype.remove = function (oldClass){
		if(!this.contains(newClass)){
			return;
		}
		this[this.indexOf(oldClass)] = undefined
		this.__self__.className = this.join(' ').replace(/  +/, ' ')
		DOMTokenList.call(this, this.__self__.className)
	}

	DOMTokenList.prototype.toggle = function (aClass){
		this[this.contains(aClass)? 'remove' : 'add'](aClass)
		return this.contains(aClass);
	}

	DOMTokenList.prototype.replace = function (oldClass, newClass){
		this.contains(oldClass) && this.remove(oldClass) && this.add(newClass)
	}

	Object.defineProperty(Element.prototype, 'classList', {
		get: function() {
			return new DOMTokenList( this.className, this );
		},
		enumerable: false
	})
}

स्निपेट का विस्तार करें

— asdru
स्रोत

4

बस दूसरों ने जो कहा है, उस पर विस्तार से बताने के लिए, कई सीएसएस वर्गों को एक स्ट्रिंग में संयुक्त किया गया है, रिक्त स्थान द्वारा सीमांकित किया गया है। इस प्रकार, यदि आप इसे हार्ड-कोड करना चाहते हैं, तो यह बस इस तरह दिखेगा:

<div class="someClass otherClass yetAnotherClass">
      <img ... id="image1" name="image1" />
</div>

वहाँ से आप आसानी से एक नई कक्षा जोड़ने के लिए आवश्यक जावास्क्रिप्ट प्राप्त कर सकते हैं ... बस तत्व के className गुण के लिए नए वर्ग के बाद एक स्थान संलग्न करें। यह जानकर, आप एक वर्ग को हटाने के लिए एक फ़ंक्शन भी लिख सकते हैं बाद में आवश्यकता उत्पन्न होनी चाहिए।

— Misko
स्रोत

4

तत्व वर्गों को सरल तरीके से जोड़ने, हटाने या जांचने के लिए:

var uclass = {
    exists: function(elem,className){var p = new RegExp('(^| )'+className+'( |$)');return (elem.className && elem.className.match(p));},
    add: function(elem,className){if(uclass.exists(elem,className)){return true;}elem.className += ' '+className;},
    remove: function(elem,className){var c = elem.className;var p = new RegExp('(^| )'+className+'( |$)');c = c.replace(p,' ').replace(/  /g,' ');elem.className = c;}
};

var elem = document.getElementById('someElem');
//Add a class, only if not exists yet.
uclass.add(elem,'someClass');
//Remove class
uclass.remove(elem,'someClass');

— मार्कोस फर्नांडीज रामोस
स्रोत

4

आप jQuery के समान आधुनिक दृष्टिकोण का उपयोग कर सकते हैं

यदि आपको केवल एक तत्व को बदलने की आवश्यकता है, तो पहले जो JS DOM में मिलेगा, आप इसका उपयोग कर सकते हैं:

document.querySelector('.someclass').className += " red";

.red {
  color: red;
}

<div class="someclass">
  <p>This method will add class "red" only to first element in DOM</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>

स्निपेट का विस्तार करें

एक जगह छोड़ने से पहले ध्यान रखेंक्लास के नाम ।

यदि आपके पास कई वर्ग हैं जहां आप नई कक्षा जोड़ना चाहते हैं, तो आप इसे इस तरह से उपयोग कर सकते हैं

document.querySelectorAll('.someclass').forEach(function(element) {
  element.className += " red";
});

.red {
  color: red;
}

<div class="someclass">
  <p>This method will add class "red" to all elements in DOM that have "someclass" class.</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>

स्निपेट का विस्तार करें

— व्लादिमीर जोवानोविक
स्रोत

3

मुझे लगता है कि शुद्ध जावास्क्रिप्ट का उपयोग करना बेहतर है, जिसे हम ब्राउज़र के डोम पर चला सकते हैं।

यहां इसका उपयोग करने का कार्यात्मक तरीका है। मैंने ईएस 6 का उपयोग किया है लेकिन ईएस 5 और फंक्शन एक्सप्रेशन या फ़ंक्शन डेफिनेशन का उपयोग करने के लिए स्वतंत्र महसूस करें, जो भी आपके जावास्क्रिप्ट स्टाइलगाइड पर सूट करता है।

'use strict'

const oldAdd = (element, className) => {
  let classes = element.className.split(' ')
  if (classes.indexOf(className) < 0) {
    classes.push(className)
  }
  element.className = classes.join(' ')
}

const oldRemove = (element, className) => {
  let classes = element.className.split(' ')
  const idx = classes.indexOf(className)
  if (idx > -1) {
    classes.splice(idx, 1)
  }
  element.className = classes.join(' ')
}

const addClass = (element, className) => {
  if (element.classList) {
    element.classList.add(className)
  } else {
    oldAdd(element, className)
  }
}

const removeClass = (element, className) => {
  if (element.classList) {
    element.classList.remove(className)
  } else {
    oldRemove(element, className)
  }
}

स्निपेट का विस्तार करें

— bvmCoder
स्रोत

2

शुद्ध जेएस के साथ नमूना। पहले उदाहरण में हम अपने तत्व की आईडी प्राप्त करते हैं और उदाहरण के लिए 2 कक्षाएं जोड़ते हैं।

document.addEventListener('DOMContentLoaded', function() {
    document.getElementsById('tabGroup').className = "anyClass1 anyClass2";
})

दूसरे उदाहरण में हमें तत्व का वर्ग नाम मिलता है और 1 और जोड़ते हैं।

document.addEventListener('DOMContentLoaded', function() {
    document.getElementsByClassName('tabGroup')[0].className = "tabGroup ready";
})

— वासिल गुटनीक
स्रोत

1

लॉडश का उपयोग करने वालों और classNameस्ट्रिंग को अपडेट करने के लिए :

// get element reference
var elem = document.getElementById('myElement');

// add some classes. Eg. 'nav' and 'nav header'
elem.className = _.chain(elem.className).split(/[\s]+/).union(['nav','navHeader']).join(' ').value()

// remove the added classes
elem.className = _.chain(elem.className).split(/[\s]+/).difference(['nav','navHeader']).join(' ').value()

— एसडी
स्रोत

0

सबसे पहले, डिव को एक आईडी दें। फिर, फ़ंक्शन appendClass को कॉल करें:

<script language="javascript">
  function appendClass(elementId, classToAppend){
    var oldClass = document.getElementById(elementId).getAttribute("class");
    if (oldClass.indexOf(classToAdd) == -1)
    {
      document.getElementById(elementId).setAttribute("class", classToAppend);
    }
}
</script>

— tehvan
स्रोत

1

यह वर्ग नहीं बदलेगा! हो सकता है कि कोई रेखा गायब हो या एक पुराना क्लाक + "" + classToAppend अंतिम क्लास के बजाय हो

— No

indexOfएक भोला समाधान है और पहले से ही बताया गया एक समस्या है ।

— डैन डेस्केल्सकू

0

आप अपने तत्व का चयन करने के लिए एपीआई क्वेरीसेंटर का उपयोग कर सकते हैं और फिर पैरामीटर और नए क्लासनाम के साथ फ़ंक्शन को पैरामीटर के रूप में बना सकते हैं। IE8 के लिए आधुनिक ब्राउज़रों के लिए कक्षा सूची का उपयोग करना। तब आप किसी ईवेंट के बाद फ़ंक्शन को कॉल कर सकते हैं।

 //select the dom element
 var addClassVar = document.querySelector('.someclass');

 //define the addclass function
 var addClass = function(el,className){
   if (el.classList){
     el.classList.add(className);
   }
   else {
     el.className += ' ' + className;
  }
};

//call the function
addClass(addClassVar, 'newClass');

— KevinOrfas
स्रोत

यह पहले से ही ब्राउज़र समर्थन के साथ चर्चा की गई है।

— डैन डेस्केल्सकू

0

सबसे छोटा

image1.parentNode.className+=' box';

कोड स्निपेट दिखाएं

image1.parentNode.className+=' box';

.box { width: 100px; height:100px; background: red; }

<div class="someclass">
    <img ... id="image1" name="image1" />
</div>

स्निपेट का विस्तार करें

— कामिल कियॉलेजवस्की
स्रोत

0

document.getElementById('some_id').className+='  someclassname'

या:

document.getElementById('come_id').classList.add('someclassname')

पहला दृष्टिकोण कक्षा को जोड़ने में मदद करता था जब दूसरा दृष्टिकोण काम नहीं करता था।
के सामने एक जगह रखने के लिए मत भूलना' someclassname'पहले दृष्टिकोण के ।

हटाने के लिए आप उपयोग कर सकते हैं:

document.getElementById('some_id').classList.remove('someclassname')

— अथिरा वी अजीत
स्रोत

-4

यह js कोड मेरे लिए काम करता है

classname प्रतिस्थापन प्रदान करता है

var DDCdiv = hEle.getElementBy.....

var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
for (var i=0; i< Ta.length;i++)
{
    if (Ta[i] == 'visible'){
        Ta[i] = 'hidden';
        break;// quit for loop
    }
    else if (Ta[i] == 'hidden'){
        Ta[i] = 'visible';
    break;// quit for loop
    }
}
DDCdiv.setAttribute('class',Ta.join(' ') );  // Join array with space and set class name

सिर्फ उपयोग जोड़ने के लिए

var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
Ta.push('New class name');
// Ta.push('Another class name');//etc...
DDCdiv.setAttribute('class',Ta.join(' ') );  // Join array with space and set class name

उपयोग को दूर करने के लिए

var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array

for (var i=0; i< Ta.length;i++)
{
    if (Ta[i] == 'visible'){
        Ta.splice( i, 1 );
        break;// quit for loop
    }
}
DDCdiv.setAttribute('class',Ta.join(' ') );  // Join array with space and set class name

आशा है कि यह किसी के लिए उपयोगी है

— शीघ्र
स्रोत

-9

यूयूआई में, यदि आप यिदोम को शामिल करते हैं , तो आप उपयोग कर सकते हैं

YAHOO.util.Dom.addClass('div1','className');

HTH

— Alagu
स्रोत

12

इसने जावास्क्रिप्ट कहा, jQuery या YUI नहीं।

— राडेक

मैं किसी दिए गए तत्व में एक वर्ग कैसे जोड़ूं?

यदि आप केवल आधुनिक ब्राउज़रों को लक्षित कर रहे हैं:

यदि आपको Internet Explorer 9 या उससे कम समर्थन की आवश्यकता है:

क्लास जोड़ें

कक्षा को हटाना

संदर्भ

प्रोटोटाइप का उपयोग करना

YUI का उपयोग करना

एक तत्व में एक अतिरिक्त वर्ग जोड़ने के लिए:

एक तत्व के लिए सभी वर्गों को बदलने के लिए:

सबसे छोटा