Pertanyaan Ubah kelas elemen dengan JavaScript


Bagaimana cara mengubah kelas elemen HTML sebagai respons terhadap suatu onClick acara menggunakan JavaScript?


2286
2017-10-12 20:06


asal


Jawaban:


Teknik HTML5 modern untuk mengubah kelas

Browser modern telah ditambahkan classList yang menyediakan metode untuk mempermudah memanipulasi kelas tanpa perlu pustaka:

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 a shim untuk menambahkan dukungan untuk itu ke IE8 dan IE9, tersedia dari halaman ini. Namun demikian, mendapatkan lebih banyak dan lebih banyak lagi didukung.

Solusi lintas peramban sederhana

Cara JavaScript standar untuk memilih elemen menggunakan document.getElementById("Id"), yang adalah apa yang digunakan contoh-contoh berikut - Anda tentu saja dapat memperoleh elemen dengan cara lain, dan dalam situasi yang tepat mungkin hanya menggunakan this sebagai gantinya - akan tetapi, memerinci hal ini berada di luar cakupan jawabannya.

Untuk mengubah semua kelas untuk elemen:

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

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

(Anda dapat menggunakan daftar terbatas spasi untuk menerapkan beberapa kelas.)

Untuk menambahkan kelas tambahan ke elemen:

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

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

Untuk menghapus kelas dari elemen:

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

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 flag memberi tahu pengulangan untuk mengulang sesuai kebutuhan, jika 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 ke acara-acara onclick:

Sementara itu mungkin untuk menulis JavaScript secara langsung di dalam atribut event HTML (seperti onclick="this.className+=' MyClass'") ini bukan perilaku yang disarankan. Terutama pada aplikasi yang lebih besar, kode yang lebih dipelihara dicapai dengan memisahkan markup HTML dari logika interaksi JavaScript.

Langkah pertama untuk mencapai ini adalah dengan membuat fungsi, dan memanggil fungsi dalam atribut onclick, misalnya:

<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }
</script>
...
<button onclick="changeClass()">My Button</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 event onclick dari HTML dan ke JavaScript, misalnya menggunakan 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>

(Perhatikan bahwa bagian window.onload diperlukan agar isi dari fungsi tersebut dieksekusi setelah HTML telah selesai memuat - tanpa ini, MyElement mungkin tidak ada ketika kode JavaScript dipanggil, sehingga garis itu akan gagal.)


Kerangka JavaScript dan Perpustakaan

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

Sementara beberapa orang menganggapnya berlebihan untuk menambahkan kerangka kerja ~ 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, itu juga layak dipertimbangkan.

(Sangat kasar, perpustakaan adalah seperangkat alat yang dirancang untuk tugas tertentu, sementara kerangka kerja umumnya berisi beberapa pustaka dan melakukan satu set tugas lengkap.)

Contoh di atas telah direproduksi di bawah ini menggunakan jQuery, mungkin pustaka JavaScript yang paling sering digunakan (meskipun ada orang lain yang patut diselidiki juga).

(Perhatikan itu $ di sini adalah objek jQuery.)

Mengubah Kelas dengan jQuery:

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

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

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

Selain itu, jQuery menyediakan cara pintas 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);



3293
2017-10-12 20:45



Anda juga bisa melakukan:

document.getElementById ('id'). classList.add ('kelas');
document.getElementById ('id'). classList.remove ('class');

Dan untuk beralih kelas (hapus jika ada yang lain menambahkannya):

document.getElementById ('id'). classList.toggle ('class');

380
2017-08-05 17:44



Di salah satu proyek lama saya yang tidak menggunakan jQuery, saya membangun fungsi-fungsi berikut untuk menambahkan, 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 menambahkan klik pada beberapa kelas tombol yang dapat saya gunakan ini:

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

Sekarang, pasti lebih baik menggunakan jQuery.


98
2018-05-28 07:32



Kamu dapat memakai node.className seperti ini:

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

Ini harus bekerja di IE5.5 dan naik sesuai dengan PPK.


64
2017-10-12 20:33



Wow, kaget ada banyak jawaban yang berlebihan disini ...

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

46
2018-01-05 19:14



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

40
2017-09-20 15:26



Ini berfungsi untuk saya:

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



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 < len; ++i) {
    if (string[i] && !new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)').test(this.className)) {
      this.className = this.className.trim() + ' ' + string[i];
    }
  }
}

HTMLElement.prototype.removeClass = function(string) {
  if (!(string instanceof Array)) {
    string = string.split(' ');
  }
  for(var i = 0, len = string.length; i < len; ++i) {
    this.className = this.className.replace(new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)'), ' ').trim();
  }
}

HTMLElement.prototype.toggleClass = function(string) {
  if (string) {
    if (new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className)) {
      this.className = this.className.replace(new RegExp('(\\s+|^)' + string + '(\\s+|$)'), ' ').trim();
    } else {
      this.className = this.className.trim() + ' ' + string;
    }
  }
}

HTMLElement.prototype.hasClass = function(string) {
  return string && new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className);
}

Dan kemudian hanya menggunakan seperti ini (saat klik akan menambah atau menghapus kelas):

document.getElementById('yourElementId').onclick = function() {
  this.toggleClass('active');
}

Disini adalah demo.


16
2018-04-11 10:13