Pertanyaan Bagaimana cara menambahkan kelas ke elemen yang diberikan?


Saya memiliki elemen yang sudah memiliki kelas:

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

Sekarang saya ingin membuat fungsi Javascript yang akan menambahkan kelas ke div (bukan menggantikan, tetapi tambahkan).

Bagaimana saya bisa melakukannya?


919
2018-02-03 13:54


asal


Jawaban:


Tambahkan spasi plus nama kelas baru Anda ke className milik elemen. Pertama, letakkan sebuah id pada elemen sehingga Anda dapat dengan mudah mendapatkan referensi.

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

Kemudian

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

Lihat juga element.className di MDN.


1640
2018-02-03 13:58



Cara termudah untuk melakukannya tanpa menggunakan kerangka apa pun element.classList.add metode.

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

Edit: Dan jika Anda ingin menghapus kelas dari elemen -

element.classList.remove("otherclass");

Saya lebih suka tidak perlu menambahkan ruang kosong dan entri duplikat menangani diri saya (yang diperlukan saat menggunakan document.className pendekatan). ada beberapa batasan browser, tetapi Anda dapat bekerja di sekitar mereka menggunakan polyfill.


1036
2017-12-31 12:12



temukan elemen target Anda "d" bagaimanapun yang Anda inginkan dan kemudian:

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

Anda dapat membungkusnya dengan cara yang lebih cerdas untuk memeriksa pra-eksistensi, dan memeriksa persyaratan ruang dll.


171
2018-02-03 14:01



Tambahkan Kelas

  • Lintas Kompatibel

    Dalam contoh berikut, kami menambahkan a classname ke <body> elemen. Ini kompatibel dengan IE-8.

    var a = document.body;
    a.classList ? a.classList.add('classname') : a.className += ' classname';
    

    Ini adalah singkatan untuk hal-hal berikut ..

    var a = document.body;
    if (a.classList) {
        a.classList.add('wait');
    } else {
        a.className += ' wait';
    }
    

  • Kinerja

    Jika Anda lebih mementingkan kinerja daripada kompatibilitas silang, Anda dapat mempersingkatnya menjadi berikut yang lebih cepat 4%.

    var z = document.body;
    document.body.classList.add('wait');
    

  • Kenyamanan

    Atau Anda bisa menggunakan jQuery tetapi kinerja yang dihasilkan secara signifikan lebih lambat. 94% lebih lambat menurut jsPerf

    $('body').addClass('wait');
    


Menghapus kelas

  • Kinerja

    Menggunakan jQuery secara selektif adalah metode terbaik untuk menghapus kelas jika Anda peduli dengan kinerja

    var a = document.body, c = ' classname';
    $(a).removeClass(c);
    

  • Tanpa jQuery, 32% lebih lambat

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

Referensi

  1. jsPerf Test Case: Menambahkan Kelas
  2. jsPerf Test Case: Menghapus Kelas

Menggunakan Prototipe

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

Menggunakan YUI

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

116
2017-12-22 23:29



Pendekatan lain untuk menambahkan kelas ke elemen menggunakan JavaScript murni

Untuk menambahkan kelas:

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

Untuk menghapus kelas:

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

32
2017-09-23 11:15



Dengan asumsi Anda melakukan lebih dari sekedar menambahkan kelas yang satu ini (misalnya, Anda memiliki permintaan asynchronous dan seterusnya juga terjadi), saya akan merekomendasikan perpustakaan seperti Prototipe atau jQuery.

Ini akan membuat hampir semua hal yang perlu Anda lakukan (termasuk ini) sangat sederhana.

Jadi katakanlah Anda memiliki jQuery di halaman Anda sekarang, Anda bisa menggunakan kode seperti ini untuk menambahkan nama kelas ke elemen (pada beban, dalam hal ini):

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

Lihat jQuery API browser untuk barang-barang lainnya.


20
2018-02-03 14:00



Ketika pekerjaan yang saya lakukan tidak menjamin menggunakan pustaka, saya menggunakan dua fungsi ini:

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;
}

20
2018-02-03 14:40