Cara menggunakan CLASSTOGGLE pada JavaScript

Bagaimana saya bisa mengubah kelas elemen HTML dalam menanggapi suatu titleperistiwa menggunakan JavaScript?

Teknik HTML5 modern untuk mengubah kelas

Browser modern telah menambahkan classList yang menyediakan metode untuk membuatnya lebih mudah untuk memanipulasi kelas tanpa perlu perpustakaan:

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'];

Sayangnya, ini tidak berfungsi di Internet Explorer sebelum v10, meskipun ada shim untuk menambahkan dukungan untuk itu ke IE8 dan IE9, tersedia dari halaman ini . Namun, semakin banyak didukung .

Solusi lintas-browser sederhana

Cara standar JavaScript untuk memilih elemen menggunakan document.getElementById["Id"], yang digunakan contoh-contoh berikut - Anda tentu saja dapat memperoleh elemen dengan cara lain, dan dalam situasi yang tepat dapat menggunakan thissaja - namun, memerinci hal ini berada di luar cakupan jawabannya.

Untuk mengubah semua kelas untuk suatu elemen:

Untuk mengganti semua kelas yang ada dengan satu atau lebih kelas baru, setel atribut className:

document.getElementById["MyElement"].className = "MyClass";

[Anda dapat menggunakan daftar yang dibatasi ruang untuk menerapkan beberapa kelas.]

Untuk menambahkan kelas tambahan ke elemen:

Untuk menambahkan kelas ke elemen, tanpa menghapus / memengaruhi nilai yang ada, tambahkan spasi dan nama kelas baru, seperti:

document.getElementById["MyElement"].className += " MyClass";

Untuk menghapus kelas dari suatu elemen:

Untuk menghapus satu kelas ke suatu elemen, tanpa mempengaruhi kelas potensial lainnya, diperlukan penggantian regex sederhana:

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

Penjelasan dari regex ini adalah sebagai berikut:

[?:^|\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]

Itu g bendera menceritakan ganti untuk mengulang seperti yang diperlukan, dalam hal nama kelas telah ditambahkan beberapa kali.

Untuk memeriksa apakah kelas sudah diterapkan ke elemen:

Regex yang sama yang digunakan di atas untuk menghapus kelas juga dapat digunakan sebagai pemeriksaan apakah kelas tertentu ada:

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

Menetapkan tindakan ini untuk mengeklik acara:

Meskipun dimungkinkan untuk menulis JavaScript langsung di dalam atribut acara HTML [seperti title="this.className+=' MyClass'" ], ini bukan perilaku yang disarankan. Terutama pada aplikasi yang lebih besar, kode yang lebih dapat dikelola dicapai dengan memisahkan markup HTML dari logika interaksi JavaScript.

Langkah pertama untuk mencapai ini adalah dengan membuat fungsi, dan memanggil fungsi di atribut title, misalnya:

    function changeClass[]{
        // Code examples from above
    }

...
My Button

[Tidak perlu memiliki kode ini dalam tag skrip, ini hanya untuk singkatnya contoh, dan termasuk JavaScript dalam file yang berbeda mungkin lebih tepat.]

Langkah kedua adalah memindahkan acara title dari HTML dan ke JavaScript, misalnya menggunakan addEventListener

    function changeClass[]{
        // Code examples from above
    }

    window.onload = function[]{
        document.getElementById["MyElement"].addEventListener[ 'click', changeClass];
    }

...
My Button

[Perhatikan bahwa bagian window.onload diperlukan agar konten fungsi tersebut dieksekusi setelah HTML selesai memuat - tanpa ini, MyElement mungkin tidak ada ketika kode JavaScript dipanggil, sehingga baris akan gagal.]

Kerangka dan Perpustakaan JavaScript

Kode di atas semuanya dalam JavaScript standar, namun itu adalah praktik umum untuk menggunakan kerangka kerja atau pustaka untuk menyederhanakan tugas-tugas umum, serta mendapat manfaat dari bug tetap dan kasus tepi yang mungkin tidak Anda pikirkan ketika menulis kode Anda.

Sementara beberapa orang menganggap itu berlebihan untuk menambahkan kerangka ~ 50 KB hanya untuk mengubah kelas, jika Anda melakukan sejumlah besar pekerjaan JavaScript, atau apa pun yang mungkin memiliki perilaku lintas-browser yang tidak biasa, ada baiknya mempertimbangkan.

[Secara kasar, perpustakaan adalah seperangkat alat yang dirancang untuk tugas tertentu, sementara kerangka kerja umumnya berisi beberapa perpustakaan dan melakukan serangkaian tugas lengkap.]

Contoh di atas telah direproduksi di bawah ini menggunakan jQuery , mungkin pustaka JavaScript yang paling umum digunakan [meskipun ada juga yang layak diselidiki].

[Perhatikan bahwa di $sini adalah objek jQuery.]

Mengubah Kelas dengan jQuery:

$['#MyElement'].addClass['MyClass'];

$['#MyElement'].removeClass['MyClass'];

if [ $['#MyElement'].hasClass['MyClass'] ]

Selain itu, jQuery menyediakan pintasan untuk menambahkan kelas jika tidak berlaku, atau menghapus kelas yang:

$['#MyElement'].toggleClass['MyClass'];

Menetapkan fungsi ke acara klik dengan jQuery:

$['#MyElement'].click[changeClass];

atau, tanpa perlu id:

$[':button:contains[My Button]'].click[changeClass];

Anda juga bisa melakukan:

document.getElementById['id'].classList.add['class'];
document.getElementById['id'].classList.remove['class'];

Dan untuk beralih kelas [hapus jika ada yang lain tambahkan]:

document.getElementById['id'].classList.toggle['class'];

Di salah satu proyek lama saya yang tidak menggunakan jQuery, saya membangun fungsi berikut untuk menambah, menghapus, dan memeriksa apakah elemen memiliki kelas:

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, ' '];
    }
}

Jadi, misalnya, jika saya ingin titlemenambahkan beberapa kelas ke tombol saya dapat menggunakan ini:

    function changeClass[btn, cls] {
        if[!hasClass[btn, cls]] {
            addClass[btn, cls];
        }
    }

...
My Button

Sekarang pasti akan lebih baik menggunakan jQuery.

Anda dapat menggunakan node.classNameseperti ini:

document.getElementById['foo'].className = 'bar';

Ini harus bekerja di IE5.5 dan lebih tinggi sesuai dengan PPK .

Wow, terkejut ada begitu banyak jawaban berlebihan di sini ...

Menggunakan kode JavaScript murni:

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

Ini bekerja untuk saya:

function setCSS[eleID] {
    var currTabElem = document.getElementById[eleID];

    currTabElem.setAttribute["class", "some_class_name"];
    currTabElem.setAttribute["className", "some_class_name"];
}

Anda juga dapat memperluas objek HTMLElement, untuk menambahkan metode untuk menambah, menghapus, beralih dan memeriksa kelas [ inti ]:

HTMLElement = typeof[HTMLElement] != 'undefiend' ? HTMLElement : Element;

HTMLElement.prototype.addClass = function[string] {
  if [![string instanceof Array]] {
    string = string.split[' '];
  }
  for[var i = 0, len = string.length; i