Yanıtlar:
Sınıf eklemek için element.classList.add komutunu kullanın :
element.classList.add("my-class");Ve bir sınıfı kaldırmak için element.classList.remove :
element.classList.remove("my-class");classNameÖğenin özelliğine boşluk ve yeni sınıfınızın adını ekleyin . İlk olarak, idkolayca referans alabilmeniz için öğeye bir a koyun .
<div id="div1" class="someclass">
<img ... id="image1" name="image1" />
</div>Sonra
var d = document.getElementById("div1");
d.className += " otherclass";Önceki boşluğa dikkat edin otherclass. Alanın dahil edilmesi önemlidir, aksi takdirde sınıf listesinde yer alan mevcut sınıflardan ödün verir.
Ayrıca bkz . MDN'de element.className .
Bunu çerçevesiz yapmanın en kolay yolu element.classList.add yöntemini kullanmaktır .
var element = document.getElementById("div1");
element.classList.add("otherclass");Düzenleme: Ve bir öğeden sınıfı kaldırmak istiyorsanız -
element.classList.remove("otherclass");Boşluk eklememeyi ve kendimi yinelemeli girişleri kullanmamayı tercih ediyorum ( document.classNameyaklaşımı kullanırken gereklidir ). Bazı tarayıcı sınırlamaları vardır , ancak çoklu dolgular kullanarak bunların etrafında çalışabilirsiniz .
hedef öğenizi "d" istediğiniz gibi bulun ve ardından:
d.className += ' additionalClass'; //note the spaceönceden varlığını kontrol etmek ve alan gereksinimlerini kontrol etmek için daha akıllıca bir şekilde sarabilirsiniz.
splitBeyaz alandaki eski ad olan sınıf adını kaldırmak için, istemediğiniz diziyi sonuçtaki diziden, ardından joindiziyi yeniden kaldırın ... veya kullanın element.classList.remove.
Çapraz Uyumlu
Aşağıdaki örnekte classname, <body>öğeye a ekliyoruz . IE-8 uyumludur.
var a = document.body;
a.classList ? a.classList.add('classname') : a.className += ' classname';Aşağıdakiler için kestirmeden ..
var a = document.body;
if (a.classList) {
a.classList.add('wait');
} else {
a.className += ' wait';
}Verim
Çapraz uyumluluk üzerindeki performansınızla daha fazla ilgileniyorsanız, bunu% 4 daha hızlı olan aşağıdakine kısaltabilirsiniz.
var z = document.body;
document.body.classList.add('wait');Kolaylık
Alternatif olarak jQuery kullanabilirsiniz, ancak elde edilen performans önemli ölçüde yavaşlar. JsPerf'e göre% 94 daha yavaş
$('body').addClass('wait');Verim
Performansla ilgileniyorsanız, bir sınıfı kaldırmak için jQuery'yi seçici olarak kullanmak en iyi yöntemdir
var a = document.body, c = ' classname';
$(a).removeClass(c);JQuery olmadan% 32 daha yavaş
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")YAHOO.util.Dom.hasClass(document.body,"classname")
YAHOO.util.Dom.addClass(document.body,"classname")
YAHOO.util.Dom.removeClass(document.body,"classname")a.classList ? ...) normaline ( if (a.classList) { ....) kıyasla herhangi bir hız farkı olacak mı?
classList.remove(). Neden kullanmadın? jQuery'den
classList, sınıfları kaldırmak dışında her şey için kullandı , bu yüzden soruyorum.
Sınıfı saf JavaScript kullanarak öğeye eklemek için başka bir yaklaşım
Sınıf eklemek için:
document.getElementById("div1").classList.add("classToBeAdded");Sınıfı kaldırmak için:
document.getElementById("div1").classList.remove("classToBeRemoved");Yaptığım iş bir kütüphane kullanmayı garanti etmediğinde, şu iki işlevi kullanıyorum:
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;
}if( cn.indexOf( classname ) != -1 ) { return; } “Btn” sınıfını “btn-info” sınıfının zaten burada olmasıyla eklerseniz bunun başarısız olduğunu unutmayın.
element.className.split(" ");@AlexandreDieulot burada bildirilen sorunu önlemek için kullanmalısınız .
Bu sınıfı eklemekten daha fazlasını yaptığınızı varsayarsak (örneğin, eşzamansız istekleriniz var ve bu şekilde devam ediyor) Prototip veya jQuery .
Bu, yapmanız gereken her şeyi (bu dahil) çok basit hale getirecektir.
Diyelim ki sayfanızda jQuery var, bir öğeye bir sınıf adı eklemek için böyle bir kod kullanabilirsiniz (yükte, bu durumda):
$(document).ready( function() {
$('#div1').addClass( 'some_other_class' );
} );Diğer şeyler için jQuery API tarayıcısına göz atın .
Bir öğeye sınıf eklemek / öğeden sınıf kaldırmak için classList.add OR classList.remove yöntemini kullanabilirsiniz.
var nameElem = document.getElementById("name")
nameElem.classList.add("anyclss")Yukarıdaki kod, nameElem öğesine "anyclass" sınıfı ekler (ve DEĞİL DEĞİL). Benzer şekilde, bir sınıfı kaldırmak için classList.remove () yöntemini kullanabilirsiniz.
nameElem.classList.remove("anyclss")Bir öğeye, varolan değerleri kaldırmadan / etkilemeden bir sınıf eklemek için bir boşluk ve yeni sınıf adı ekleyin, örneğin:
document.getElementById("MyElement").className += " MyClass";Varolan tüm sınıfları bir veya daha fazla yeni sınıfla değiştirmek için className özniteliğini ayarlayın:
document.getElementById("MyElement").className = "MyClass";(Birden çok sınıf uygulamak için boşlukla ayrılmış bir liste kullanabilirsiniz.)
JQuery kullanmak istemiyorsanız ve daha eski tarayıcıları desteklemek istiyorsanız:
function addClass(elem, clazz) {
if (!elemHasClass(elem, clazz)) {
elem.className += " " + clazz;
}
}
function elemHasClass(elem, clazz) {
return new RegExp("( |^)" + clazz + "( |$)").test(elem.className);
}IE9'un resmi olarak kapatıldığını biliyorum ve element.classListyukarıda anlatıldığı gibi bunu başarabiliriz, ancak yukarıdaki classListbirçok cevap yardımı olmadan nasıl çalıştığını öğrenmeye çalıştım .
Aşağıdaki kod, yukarıdaki birçok cevabı genişletir ve yinelenen sınıflar eklemekten kaçınarak bunları geliştirir.
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');Ben de en hızlı yolun Element.prototype.classList'i es5'te kullanmak olduğunu düşünüyorum: document.querySelector(".my.super-class").classList.add('new-class')
ama ie8'de Element.prototype.classList diye bir şey yok, yine de bu snippet ile çoklu doldurabilirsiniz (düzenlemek ve geliştirmek için serbest düştünüz) ):
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
})
}Başkalarının söylediklerini ayrıntılı olarak açıklamak için, birden çok CSS sınıfı boşluklarla sınırlandırılmış tek bir dizede birleştirilir. Bu nedenle, zor kodlamak isterseniz, sadece şöyle görünecektir:
<div class="someClass otherClass yetAnotherClass">
<img ... id="image1" name="image1" />
</div>Oradan kolayca yeni bir sınıf eklemek için gerekli javascript türetebilirsiniz ... sadece öğenin className özelliğine bir boşluk ve ardından yeni sınıf ekleyin. Bunu bilerek, ihtiyaç duyulması halinde daha sonra bir sınıfı kaldırmak için bir işlev yazabilirsiniz.
Öğe sınıflarını basit bir şekilde eklemek, kaldırmak veya kontrol etmek için:
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');JQuery'ye benzer modern yaklaşımı kullanabilirsiniz
İlk olarak JS'nin DOM'da bulacağı yalnızca bir öğeyi değiştirmeniz gerekirse, bunu kullanabilirsiniz:
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>Sınıf adından önce bir boşluk bırakmayı unutmayın .
Yeni sınıf eklemek istediğiniz birden fazla sınıfınız varsa, sınıfı şu şekilde kullanabilirsiniz
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>Tarayıcının DOM'sinde çalıştırabileceğimiz saf JavaScript kullanmak daha iyi olduğunu düşünüyorum.
İşte kullanmanın fonksiyonel yolu. ES6 kullandım, ancak JavaScript StyleGuide'ınıza uygun olan ES5'i ve işlev ifadesini veya işlev tanımını kullanmaktan çekinmeyin.
'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)
}
}Saf JS ile örnek. İlk örnekte elemanımızın kimliğini alıyoruz ve örneğin 2 sınıf ekliyoruz.
document.addEventListener('DOMContentLoaded', function() {
document.getElementsById('tabGroup').className = "anyClass1 anyClass2";
})İkinci örnekte elementin sınıf adını alıyoruz ve 1 tane daha ekliyoruz.
document.addEventListener('DOMContentLoaded', function() {
document.getElementsByClassName('tabGroup')[0].className = "tabGroup ready";
})Lodash kullanan ve classNamedizeyi güncellemek isteyenler için :
// 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()önce div'e bir kimlik verin. Ardından appendClass işlevini çağırın:
<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>API querySelector öğesini kullanarak öğenizi seçebilir ve ardından öğe ve yeni sınıf adıyla parametreler olarak bir işlev oluşturabilirsiniz. IE8 için modern tarayıcılar için sınıf listesini kullanma. Ardından bir olaydan sonra işlevi çağırabilirsiniz.
//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');document.getElementById('some_id').className+=' someclassname'VEYA:
document.getElementById('come_id').classList.add('someclassname')İlk yaklaşım, ikinci yaklaşım işe yaramadığında sınıfın eklenmesine yardımcı oldu.
Önünde bir boşluk bırakmayı unutmayın' someclassname'İlk yaklaşımda .
Kaldırma için şunları kullanabilirsiniz:
document.getElementById('some_id').classList.remove('someclassname')Bu js kodu benim için çalışıyor
sınıf adı değiştirme sağlar
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 nameEklemek için sadece kullanın
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 nameKullanımı kaldırmak için
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 nameUmarım bu birileri için yararlıdır
element.classList.add("my-class")bunun yerine kullanın.