Soru Bir öğenin sınıfını JavaScript ile değiştirme


Bir HTML öğesinin bir sınıfına nasıl yanıt verebilirim? onClick JavaScript kullanarak etkinlik


2290
2017-10-12 20:06


Menşei


"Sınıf özniteliği çoğunlukla bir stil sayfasındaki bir sınıfa işaret etmek için kullanılır. Bununla birlikte, belirli bir sınıfa sahip HTML öğelerinde değişiklik yapmak için bir JavaScript tarafından da (HTML DOM aracılığıyla) kullanılabilir." -w3schools.com/tags/att_standard_class.asp - Triynko
element.setAttribute(name, value);  değiştirmek name ile class. değiştirmek value sınıfta verdiğiniz adla, tırnak içine alın. Bu, mevcut sınıfı silmeye ve farklı bir tane eklemeye gerek kalmaz. Bu jsFiddle örneği Tam çalışma kodunu gösterir. - Sandy Good
Bir HTML öğesinin sınıfını onClick ile değiştirmek için bu kodu kullanın: <input type='button' onclick='addNewClass(this)' value='Create' />   ve javascript bölümünde: function addNewClass(elem){ elem.className="newClass"; } İnternet üzerinden - Iman Bahrampour


Cevaplar:


Sınıfları değiştirmek için Modern HTML5 Teknikleri

Modern tarayıcılar eklendi classlist Bir kütüphaneye ihtiyaç duymadan sınıfları manipüle etmeyi kolaylaştıran yöntemler sağlar:

document.getElementById("MyElement").classList.add('MyClass');

document.getElementById("MyElement").classList.remove('MyClass');

if ( document.getElementById("MyElement").classList.contains('MyClass') )

document.getElementById("MyElement").classList.toggle('MyClass');

Ne yazık ki, bunlar v10 öncesinde Internet Explorer'da çalışmıyor, ancak layner IE8 ve IE9 için destek eklemek bu sayfa. Yine de, giderek daha fazla oluyor destekli.

Basit çapraz tarayıcı çözümü

Bir eleman seçmek için standart JavaScript yolu kullanıyor document.getElementById("Id")Aşağıdaki örneklerin kullandığı şeydir - elbette başka şekillerde elemanlar elde edebilirsiniz ve doğru durumda sadece this bunun yerine - bununla ilgili olarak ayrıntılara girmek cevabın kapsamı dışındadır.

Bir öğe için tüm sınıfları değiştirmek için:

Var olan 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 fazla sınıf uygulamak için boşlukla ayrılmış bir liste kullanabilirsiniz.)

Bir öğeye ek bir sınıf eklemek için:

Bir öğeye bir sınıf eklemek için, varolan değerleri kaldırmadan / etkilemeden, bir boşluk ve yeni bir sınıf adı ekleyin.

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

Bir öğeden bir sınıfı kaldırmak için:

Tek bir sınıfı başka bir potansiyel sınıfı etkilemeden bir öğeye kaldırmak için basit bir normal ifadenin değiştirilmesi gerekir:

document.getElementById("MyElement").className =
   document.getElementById("MyElement").className.replace
      ( /(?:^|\s)MyClass(?!\S)/g , '' )
/* Code wrapped for readability - above is all one statement */

Bu regex'in açıklaması şöyledir:

(?:^|\s) # Match the start of the string, or any single whitespace character

MyClass  # The literal text for the classname to remove

(?!\S)   # Negative lookahead to verify the above is the whole classname
         # Ensures there is no non-space character following
         # (i.e. must be end of string or a space)

g bayrak, sınıf adının birden çok kez eklenmesi durumunda, değiştirmenin gerektiği gibi tekrarlanmasını söyler.

Bir öğeye zaten bir uygulanmış olup olmadığını kontrol etmek için:

Bir sınıfı kaldırmak için yukarıda kullanılan aynı regex, belirli bir sınıfın var olup olmadığı konusunda bir kontrol olarak kullanılabilir:

if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )


Bu eylemleri onclick etkinliklerine atama:

JavaScript'i doğrudan HTML olayı özelliklerinin içine yazmak mümkün olsa da (örn. onclick="this.className+=' MyClass'") Bu tavsiye edilen davranış değildir. Özellikle büyük uygulamalarda, HTML işaretlemesini JavaScript etkileşim mantığından ayırarak daha fazla sürdürülebilir kod elde edilir.

Bunu gerçekleştirmenin ilk adımı, bir işlev oluşturarak ve onclick özniteliğindeki işlevi çağırmaktır, örneğin:

<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }
</script>
...
<button onclick="changeClass()">My Button</button>

(Bu kodun komut dosyası etiketlerinde bulunması gerekmez, bu sadece örnek kısalığı içindir ve JavaScript'i ayrı bir dosyada dahil etmek daha uygun olabilir.)

İkinci adım, onclick olayını HTML'den ve JavaScript’e aktarmaktır. addEventListener

<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }

    window.onload = function(){
        document.getElementById("MyElement").addEventListener( 'click', changeClass);
    }
</script>
...
<button id="MyElement">My Button</button>

(Window.onload kısmının gerekli olduğunu unutmayın, böylece bu işlevin içeriği yürütülür. sonra HTML yüklemeyi tamamladı - bu olmadan, JavaScript kodu çağrıldığında MyElement mevcut olmayabilir, böylece satır başarısız olur.)


JavaScript Çerçeveleri ve Kütüphaneler

Yukarıdaki kodun tamamı standart JavaScript'tir, ancak ortak görevleri basitleştirmek için bir çerçeve veya kitaplık kullanmanın yanı sıra, kodunuzu yazarken düşünemeyeceğiniz sabit hatalar ve kenar durumlarından faydalanmak yaygın bir uygulamadır.

Bazı insanlar, sadece bir sınıfı değiştirmek için ~ 50 KB'lik bir çerçeve eklemeyi çok fazla düşünürken, herhangi bir önemli miktarda JavaScript çalışması yapıyorsanız veya alışılmadık bir tarayıcılar arası davranışa sahip olabilecek herhangi bir şey varsa, dikkate almanız iyi olacaktır.

(Çok kabaca, bir kütüphane belirli bir görev için tasarlanmış bir araç kümesidir; bir çerçeve genellikle çoklu kütüphaneler içerir ve tam bir görev kümesi yerine getirir.)

Yukarıdaki örnekler aşağıda kullanılarak yeniden üretilmiştir. jQueryMuhtemelen en sık kullanılan JavaScript kitaplığı (yine de araştırmaya değer başkaları da var).

(Bunu not et $ İşte jQuery nesnesi.)

JQuery ile Değişen Sınıflar:

$('#MyElement').addClass('MyClass');

$('#MyElement').removeClass('MyClass');

if ( $('#MyElement').hasClass('MyClass') )

Buna ek olarak, jQuery, uygulanmadığı takdirde bir sınıf eklemek için bir kısayol sağlar veya şunları yapan bir sınıfı kaldırır:

$('#MyElement').toggleClass('MyClass');


JQuery ile bir tıklama etkinliğine bir işlev atama:

$('#MyElement').click(changeClass);

veya bir kimliğe gerek olmadan:

$(':button:contains(My Button)').click(changeClass);



3302
2017-10-12 20:45



Harika cevap Peter. Bir soru ... neden? daha iyi JQuery ile Javascript ile ne yapmalı? JQuery harika, ama eğer yapmanız gereken tek şey varsa - JavaScript'in birkaç satırı yerine tüm JQuery libray'ını dahil etmeyi haklı kılan nedir? - mattstuehler
@mattstuehler 1) "daha iyisi x" ifadesi sık sık "daha iyisi (yapabilirsiniz) x" anlamına gelir. 2) Konunun özüne ulaşmak için jQuery, DOM'a erişmeye / manipüle etmeye yardımcı olacak şekilde tasarlanmıştır ve sıklıkla bu tür şeyleri yapmanız gerektiğinde, her zaman bunu yapmanız gerekir. - Barry
Bu çözümle ilgili bir hata: Düğmenizi birden çok kez tıkladığınızda, zaten var olup olmadığını kontrol etmek yerine, "Sınıfım" sınıfını öğeye birden çok kez ekler. Böylece böyle bir şeye benzeyen bir HTML sınıf özniteliğine sahip olabilirsiniz: class="button MyClass MyClass MyClass" - Web_Designer
'MyClass' sınıfını kaldırmaya çalışıyorsanız ve 'prefix-myClass' sınıfına sahipseniz, bir sınıfı kaldırmak için yukarıda anlattığınız regex, className: O'da 'prefix-' ile sizi bırakacaktır. - jinglesthula
Vay, üç yıl ve 183 tane oy kullanmıştı ve şimdiye kadar kimse bunu fark etmedi. Teşekkürler jinglesthula, regex'i düzeltdim, bu yüzden sınıf isimlerinin parçalarını yanlış bir şekilde kaldırmayacağım. // Sanırım bu, bir JQuery gibi bir Çerçevenin neden kullanılmaya değer olduğuna dair iyi bir örnektir - bu gibi hatalar daha çabuk yakalanır ve sabitlenir ve normal koda değişiklik yapılmasına gerek yoktur. - Peter Boughton


Ayrıca sadece yapabilirsin:

Document.getElementById ( 'kimlik') classList.add ( 'sınıf'.);
Document.getElementById ( 'kimlik') classList.remove ( 'sınıf'.);

Ve bir sınıfı daraltmak için (var olan varsa ekleyiniz):

. Document.getElementById ( 'id) classList.toggle ( 'sınıf');

380
2017-08-05 17:44



Bunun HTML5 bağımlı olduğuna inanıyorum. - John
Eli Grey’e ihtiyacın var. classList şim. - ELLIOTTCABLE
Bu dikkat çekmeye değer IE sürümlerinde 8'den az çalışmıyor. - Lloyd
Mozilla Geliştirici Ağı Doğal olarak, Internet Explorers'ın 10'dan az çalışmamasını belirtiyor. Testimde, doğru olan ifadeyi buluyorum. Görünüşe göre, Eli Gri Şim Internet Explorer 8-9 için gereklidir. Ne yazık ki, onun sitesinde (arama ile bile) bulamadım. Shim Mozilla bağlantısında kullanılabilir. - doubleJ
atow "classList", IE10 + 'da kısmi desteğe sahiptir; Opera Mini için destek yok; Kalan standart tarayıcılarda tam destek: caniuse.com/#search=classlist - Nick Humphrey


JQuery kullanmayan eski projelerimden birinde, öğenin sınıf içerip içermediğini eklemek, kaldırmak ve denetlemek için aşağıdaki işlevleri oluşturdum:

function hasClass(ele, cls) {
    return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(ele, cls) {
    if (!hasClass(ele, cls)) ele.className += " " + cls;
}
function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

Yani, örneğin, bir sınıf eklemek için onclick düğmesine basarsam bunu kullanabilirim:

<script type="text/javascript">
    function changeClass(btn, cls) {
        if(!hasClass(btn, cls)) {
            addClass(btn, cls);
        }
    }
</script>
...
<button onclick="changeClass(this, "someClass")">My Button</button>

Şimdiye kadar jQuery kullanmak daha iyi olurdu.


98
2018-05-28 07:32



Bu, istemcinizin jQuery'yi kullanmasına izin vermediği zaman için idealdir. (Çünkü neredeyse kendi kütüphaneni kuruyorsun.) - Mike
@Mike İstemci jQuery kullanmanıza izin vermiyorsa, sadece ihtiyacınız olan özellikleri yalnızca kendi kitaplığınıza yerleştirip yeniden oluşturamaz mısınız? - kfrncs
Kfrncs Çünkü genel olarak büyük bir çerçeveye ihtiyacım yok. Düşündüğüm proje için ihtiyaç duyduğum tek fonksiyonlar 3 classname (sahip, ekle, kaldır) fonksiyonları ve cookie (sahip, ekle, kaldır) fonksiyonlarıydı. Her şey ya özeldi, ya da doğal olarak iyi desteklenmişti. Yani her şey birlikte, yorumlar da dahil olmak üzere, küçültmeden önce sadece 150 satırdı. - Mike
Dostum, 4 am ve çok teşekkür ederim. Vanilla JS, projemde kullandığımız şeydir ve bu bir hayat kurtarıcıydı. - LessQuesar
Bu benim için en sevdiğim çözüm. Onu heryerde kullanırım. Projenizin zaten bunu yapmanın başka bir yolu olmadığında sınıf ekleme ve çıkarma işlemlerinin en zarif yolu olduğuna inanıyorum. - WebWanderer


Kullanabilirsiniz node.className öyle:

document.getElementById('foo').className = 'bar';

Bu IE5.5'te çalışmalı ve PPK.


64
2017-10-12 20:33



Bu, nesnenin üzerindeki tüm diğer sınıfların üzerine yazacaktı ... bu kadar basit değil. - Eric Sebasta


Vay, şaşkın, burada çok fazla overkill cevap var.

<div class="firstClass" onclick="this.className='secondClass'">

46
2018-01-05 19:14



evet, ama göze batmayan javascript daha iyi bir uygulamadır .. - Lloyd
Göze batmayan javascript örnek kod yazmak için korkunç bir uygulama olduğunu söyleyebilirim. - Gabe
Katılmıyorum, çünkü örnek kodun iyi bir örnek oluşturması gerektiğini düşünüyorum. - thomasrutter
İyi bir örnek, hayal gücünü aynı zamanda yönlendirmeli ve kıvamalıdır. Düşüncenin yerini almamalı, ilham vermelidir. - Anthony Rutledge
Diğer cevaplar aşırı değildir, ayrıca var olan sınıfları eleman üzerinde tutar. - gcampbell


Saf JavaScript kodunu kullanma:

function hasClass(ele, cls) {
    return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

function addClass(ele, cls) {
    if (!this.hasClass(ele, cls)) ele.className += " " + cls;
}

function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

function replaceClass(ele, oldClass, newClass){
    if(hasClass(ele, oldClass)){
        removeClass(ele, oldClass);
        addClass(ele, newClass);
    }
    return;
}

function toggleClass(ele, cls1, cls2){
    if(hasClass(ele, cls1)){
        replaceClass(ele, cls1, cls2);
    }else if(hasClass(ele, cls2)){
        replaceClass(ele, cls2, cls1);
    }else{
        addClass(ele, cls1);
    }
}

40
2017-09-20 15:26



Aynı burada olduğu gibi: snipplr.com/view/3561/addclass-removeclass-hasclass - Jaider


Bu benim için çalışıyor:

function setCSS(eleID) {
    var currTabElem = document.getElementById(eleID);

    currTabElem.setAttribute("class", "some_class_name");
    currTabElem.setAttribute("className", "some_class_name");
}

27
2017-12-08 09:36



Mükemmel cevap! Eklemek için sadece sola: Seçici için bir sınıf elemanlar grubu için bir stil belirtmek üzere her bir CSS sınıfı ismini ayarlayın - Roman Polen.
Bu FF için benim için çalışır, ancak el.className = "newStyle" kullanmaya çalıştığımda; işe yaramadı, neden? - Lukasz 'Severiaan' Grela
Kullanabilirsiniz el.setAttribute('class', newClass)ya da daha iyisi el.className = newClass. Ama değil el.setAttribute('className', newClass). - Oriol