Bagaimana saya bisa mengubah kelas elemen dengan JavaScript?


2776

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


28
"Atribut kelas sebagian besar digunakan untuk menunjuk ke kelas dalam lembar gaya. Namun, itu juga dapat digunakan oleh JavaScript (melalui DOM HTML) untuk membuat perubahan pada elemen HTML dengan kelas yang ditentukan." - w3schools.com/tags/att_standard_class.asp
Triynko

11
element.setAttribute(name, value); Ganti namedengan class. Ganti valuedengan nama apa pun yang Anda berikan kepada kelas, diapit dengan tanda kutip. Ini menghindari perlu menghapus kelas saat ini dan menambahkan yang berbeda. Contoh jsFiddle ini menunjukkan kode kerja penuh.
Alan Wells

3
Untuk mengubah kelas elemen HTML dengan onClick gunakan kode ini: <input type='button' onclick='addNewClass(this)' value='Create' /> dan di bagian javascript: function addNewClass(elem){ elem.className="newClass";} Online
Iman Bahrampour

@Triynko - tautan di w3schools telah berubah, sepertinya pada September 2012. Ini adalah laman di Archive.org mulai 12 / Sep / 2012: Atribut kelas-w3schools HTML . Berikut ini tautan untuk halaman pengganti di w3schools.com: Atribut kelas HTML-w3schools .
Kevin Fegan

Jawaban:


3881

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 onclick="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 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 acara 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 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);



105
Jawaban bagus Peter. Satu pertanyaan ... mengapa lebih baik hubungannya dengan JQuery daripada Javascript? JQuery memang hebat, tetapi jika hanya itu yang perlu Anda lakukan - apa yang dibenarkan termasuk seluruh jibril JQuery alih-alih beberapa baris JavaScript?
mattstuehler

23
@mattstuehler 1) frasa "lebih baik lagi x" sering berarti "lebih baik lagi (Anda bisa) x". 2) Untuk sampai ke inti permasalahan, jQuery dirancang untuk membantu mengakses / memanipulasi DOM, dan sangat sering jika Anda perlu melakukan hal semacam ini setelah Anda harus melakukannya di semua tempat.
Barry

31
Satu bug dengan solusi ini: Ketika Anda mengklik tombol Anda beberapa kali, itu akan menambahkan Kelas "MyClass" ke elemen beberapa kali, daripada memeriksa untuk melihat apakah sudah ada. Dengan demikian Anda bisa berakhir dengan atribut kelas HTML yang terlihat seperti ini:class="button MyClass MyClass MyClass"
Web_Designer

35
Jika Anda mencoba untuk menghapus kelas 'myClass' dan Anda memiliki kelas 'prefix-myClass' regex yang Anda berikan di atas untuk menghapus kelas akan meninggalkan Anda dengan 'awalan-' di className: O
jinglesthula

16
Wow, tiga tahun dan 183 suara naik dan tidak ada yang melihatnya sampai sekarang. Terima kasih jinglesthula, saya telah mengoreksi regex sehingga tidak salah menghapus bagian dari nama kelas. // Saya rasa ini adalah contoh bagus mengapa Kerangka (seperti jQuery) layak digunakan - bug seperti ini ditangkap dan diperbaiki lebih cepat, dan tidak memerlukan perubahan pada kode normal.
Peter Boughton

422

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

63
Saya percaya ini tergantung HTML5.
Yohanes

12
Anda akan membutuhkan classListshim Eli Grey .
DAPAT DITERIMA

15
Jaringan Pengembang Mozilla menyatakan bahwa itu tidak berfungsi, secara asli, di Internet Explorers kurang dari 10. Saya menemukan pernyataan itu benar, dalam pengujian saya. Rupanya, Eli Gray shim diperlukan untuk Internet Explorer 8-9. Sayangnya, saya tidak dapat menemukannya di situsnya (bahkan dengan pencarian). Shim tersedia di tautan Mozilla.
doubleJ


4
atow "classList" memiliki dukungan parsial di IE10 +; tidak ada dukungan untuk Opera Mini; dukungan penuh lainnya dalam peramban standar yang tersisa: caniuse.com/#search=classlist
Nick Humphrey

119

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 onclickmenambahkan beberapa kelas ke tombol saya dapat menggunakan 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 akan lebih baik menggunakan jQuery.


8
Ini bagus untuk saat klien Anda tidak membiarkan Anda menggunakan jQuery. (Karena Anda akhirnya hampir membangun perpustakaan Anda sendiri.)
Mike

1
@ Mike Jika klien tidak membiarkan Anda menggunakan jQuery, bisakah Anda tidak hanya melalui dan membangun kembali hanya fitur yang Anda butuhkan ke perpustakaan Anda sendiri?
kfrncs

5
@ kfrncs Karena saya biasanya tidak membutuhkan kerangka kerja yang besar. Untuk proyek yang saya pikirkan, satu-satunya fungsi yang saya butuhkan adalah fungsi 3 classname (memiliki, menambah, menghapus) dan fungsi cookie (memiliki, menambah, menghapus). Semua yang lain adalah kebiasaan, atau didukung dengan baik. Jadi semuanya bersama hanya 150 baris sebelum minifying, termasuk komentar.
Mike

2
Bung, jam 4 pagi dan terima kasih banyak. Vanilla JS adalah apa yang kami gunakan pada proyek saya dan ini adalah penyelamat.
LessQuesar

Ini solusi favorit saya untuk ini. Saya menggunakannya di mana-mana. Saya percaya ini adalah cara paling elegan untuk mencapai penambahan dan penghapusan kelas ketika proyek Anda belum memiliki cara lain untuk melakukannya.
WebWanderer

77

Anda dapat menggunakan node.classNameseperti ini:

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

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


11
ini akan menimpa setiap dan semua kelas lain pada objek ... jadi tidak sesederhana itu.
Eric Sebasta

51

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

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

14
Saya akan mengatakan javascript tidak mencolok adalah praktik yang mengerikan untuk menulis kode contoh ...
Gabe

22
Saya tidak setuju, karena saya pikir kode contoh harus memberikan contoh yang baik.
thomasrutter

1
Contoh yang baik harus menginstruksikan dan memicu imajinasi pada saat yang bersamaan. Seharusnya tidak menggantikan pemikiran, tetapi menginspirasi itu.
Anthony Rutledge

4
Jawaban lain tidak berlebihan, mereka juga mempertahankan kelas yang ada pada elemen.
gcampbell

47

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

33

Ini bekerja untuk saya:

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

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

Jawaban yang sangat bagus! Baru saja menambahkan: Atur untuk setiap nama kelas CSS untuk pemilih untuk menentukan gaya untuk sekelompok elemen kelas
Roman Polen.

Ini berfungsi untuk saya di FF, tetapi ketika saya mencoba menggunakan el.className = "newStyle"; itu tidak berhasil, mengapa?
Lukasz 'Severiaan' Grela

1
Anda bisa menggunakan el.setAttribute('class', newClass)atau lebih baik el.className = newClass. Tapi tidak el.setAttribute('className', newClass).
Oriol

20

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 gunakan seperti ini (klik akan menambah atau menghapus kelas):

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

Ini demo .


1
yang ini sedikit bertele-tele ... di sini ada solusi yang sangat ringkas ... jsfiddle.net/jdniki/UaT3P
zero_cool

5
Maaf @Jackson_Sandland tetapi Anda benar-benar melewatkan intinya, yang sama sekali tidak menggunakan jQuery.
moka

17

Hanya untuk menambahkan informasi dari kerangka kerja populer lainnya, Google Closures, lihat kelas dom / kelas mereka:

goog.dom.classes.add(element, var_args)

goog.dom.classes.addRemove(element, classesToRemove, classesToAdd)

goog.dom.classes.remove(element, var_args)

Salah satu opsi untuk memilih elemen menggunakan goog.dom.query dengan pemilih CSS3:

var myElement = goog.dom.query("#MyElement")[0];

14

Beberapa catatan kecil dan perubahan pada regex sebelumnya:

Anda akan ingin melakukannya secara global jika daftar kelas memiliki nama kelas lebih dari sekali. Dan, Anda mungkin ingin menghapus spasi dari ujung daftar kelas dan mengonversi beberapa ruang menjadi satu ruang agar tidak mendapatkan ruang berlari. Tak satu pun dari hal-hal ini akan menjadi masalah jika satu-satunya kode yang bertele-tele dengan nama kelas menggunakan regex di bawah ini dan menghapus nama sebelum menambahkannya. Tapi. Nah, siapa yang tahu siapa yang mungkin berkutat dengan daftar nama kelas.

Regex ini tidak peka terhadap huruf besar-kecil sehingga bug dalam nama kelas dapat muncul sebelum kode digunakan pada browser yang tidak peduli dengan huruf besar-kecil dalam nama kelas.

var s = "testing   one   four  one  two";
var cls = "one";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "test";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "testing";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "tWo";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");

13

Ubah kelas CSS elemen dengan JavaScript di ASP.NET :

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not Page.IsPostBack Then
        lbSave.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'")
        lbSave.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'")
        lbCancel.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'")
        lbCancel.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'")
    End If
End Sub

13

Saya akan menggunakan jQuery dan menulis sesuatu seperti ini:

jQuery(function($) {
    $("#some-element").click(function() {
        $(this).toggleClass("clicked");
    });
});

Kode ini menambahkan fungsi untuk dipanggil ketika elemen id -elemen diklik. Fungsi menambahkan klik ke atribut kelas elemen jika itu belum menjadi bagian dari itu, dan menghapusnya jika ada di sana.

Ya, Anda perlu menambahkan referensi ke pustaka jQuery di halaman Anda untuk menggunakan kode ini, tetapi setidaknya Anda bisa merasa yakin sebagian besar fungsi di pustaka akan bekerja pada hampir semua browser modern, dan itu akan menghemat waktu Anda menerapkan kode Anda sendiri untuk melakukan hal yang sama.

Terima kasih


8
Anda hanya perlu menulis jQuerydalam bentuk panjang sekali. jQuery(function($) { });membuat $tersedia di dalam fungsi dalam semua kasus.
ThiefMaster

10

Garis

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(/\bMyClass\b/','')

seharusnya:

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace('/\bMyClass\b/','');

8
Salah. RegEx dibatasi oleh garis miring ke depan. Menambahkan kutipan menyebabkannya gagal di IE, mengembalikan string kelas yang Anda coba hapus daripada benar-benar menghapus kelas.
Dylan

9

Ubah kelas elemen dalam JavaScript vanilla dengan dukungan IE6

Anda dapat mencoba menggunakan attributesproperti node untuk menjaga kompatibilitas dengan browser lama bahkan IE6:

function getClassNode(element) {
  for (var i = element.attributes.length; i--;)
    if (element.attributes[i].nodeName === 'class')
      return element.attributes[i];
}

function removeClass(classNode, className) {
  var index, classList = classNode.value.split(' ');
  if ((index = classList.indexOf(className)) > -1) {
    classList.splice(index, 1);
    classNode.value = classList.join(' ');
  }
}

function hasClass(classNode, className) {
  return classNode.value.indexOf(className) > -1;
}

function addClass(classNode, className) {
  if (!hasClass(classNode, className))
    classNode.value += ' ' + className;
}

document.getElementById('message').addEventListener('click', function() {
  var classNode = getClassNode(this);
  var className = hasClass(classNode, 'red') && 'blue' || 'red';

  removeClass(classNode, 'red');
  removeClass(classNode, 'blue');

  addClass(classNode, className);
})
.red {
  color: red;
}
.red:before {
  content: 'I am red! ';
}
.red:after {
  content: ' again';
}
.blue {
  color: blue;
}
.blue:before {
  content: 'I am blue! '
}
<span id="message" class="">Click me</span>


8

Ini versi saya, berfungsi penuh:

function addHTMLClass(item, classname) {
    var obj = item
    if (typeof item=="string") {
        obj = document.getElementById(item)
    }
    obj.className += " " + classname
}

function removeHTMLClass(item, classname) {
    var obj = item
    if (typeof item=="string") {
        obj = document.getElementById(item)
    }
    var classes = ""+obj.className
    while (classes.indexOf(classname)>-1) {
        classes = classes.replace (classname, "")
    }
    obj.className = classes
}

Pemakaian:

<tr onmouseover='addHTMLClass(this,"clsSelected")'
onmouseout='removeHTMLClass(this,"clsSelected")' >

4
Itu akan merusak kelas foobarjika Anda mencoba untuk menghapus kelas foo. JS dalam atribut event handler intrinsik telah rusak sebelum diedit. Jawaban yang diterima 4 tahun jauh lebih baik.
Quentin

1
terima kasih, saya memperbaikinya (bukan masalah awalan). jawaban lama yang diterima memiliki bug pada regexp.
alfred

Kode masih memiliki foobarmasalah. Lihat tes di sini
rosell.dk

8

Berikut ini adalah toggleClass untuk beralih / menambah / menghapus kelas pada suatu elemen:

// If newState is provided add/remove theClass accordingly, otherwise toggle theClass
function toggleClass(elem, theClass, newState) {
    var matchRegExp = new RegExp('(?:^|\\s)' + theClass + '(?!\\S)', 'g');
    var add=(arguments.length>2 ? newState : (elem.className.match(matchRegExp) == null));

    elem.className=elem.className.replace(matchRegExp, ''); // clear all
    if (add) elem.className += ' ' + theClass;
}

Lihat jsfiddle

lihat juga jawaban saya di sini untuk membuat kelas baru secara dinamis


6

Saya menggunakan fungsi JavaScript vanilla berikut dalam kode saya. Mereka menggunakan ekspresi reguler dan indexOftetapi tidak perlu mengutip karakter khusus dalam ekspresi reguler.

function addClass(el, cn) {
    var c0 = (" " + el.className + " ").replace(/\s+/g, " "),
        c1 = (" " + cn + " ").replace(/\s+/g, " ");
    if (c0.indexOf(c1) < 0) {
        el.className = (c0 + c1).replace(/\s+/g, " ").replace(/^ | $/g, "");
    }
}

function delClass(el, cn) {
    var c0 = (" " + el.className + " ").replace(/\s+/g, " "),
        c1 = (" " + cn + " ").replace(/\s+/g, " ");
    if (c0.indexOf(c1) >= 0) {
        el.className = c0.replace(c1, " ").replace(/\s+/g, " ").replace(/^ | $/g, "");
    }
}

Anda juga dapat menggunakan element.classList di browser modern.


3

PILIHAN.

Berikut adalah sedikit contoh style vs. classList untuk membuat Anda melihat apa saja pilihan yang tersedia dan cara menggunakannya classListuntuk melakukan apa yang Anda inginkan.

style vs. classList

Perbedaan antara styledan classListadalah bahwa dengan styleAnda menambah sifat-sifat gaya elemen, tapi classListini agak mengendalikan kelas (es) dari elemen ( add, remove, toggle, contain), saya akan menunjukkan bagaimana menggunakan adddan removemetode karena mereka adalah yang populer.


Contoh Gaya

Jika Anda ingin menambahkan margin-topproperti ke dalam elemen, Anda dapat melakukannya di:

// Get the Element
const el = document.querySelector('#element');

// Add CSS property 
el.style.margintop = "0px"
el.style.margintop = "25px" // This would add a 25px to the top of the element.

Contoh classList

Katakanlah kita memiliki <div class="class-a class-b">, dalam hal ini, kita sudah memiliki 2 kelas yang ditambahkan ke elemen div kita, class-adan class-b, dan kita ingin mengendalikan kelas removeapa dan kelas apa yang ingin kita ikuti add. Di sinilahclassList menjadi berguna.

Menghapus class-b

// Get the Element
const el = document.querySelector('#element');

// Remove class-b style from the element
el.classList.remove("class-b")

Menambahkan class-c

// Get the Element
const el = document.querySelector('#element');

// Add class-b style from the element
el.classList.add("class-c")


1

Hanya berpikir saya akan memasukkan ini:

function inArray(val, ary){
  for(var i=0,l=ary.length; i<l; i++){
    if(ary[i] === val){
      return true;
    }
  }
  return false;
}
function removeClassName(classNameS, fromElement){
  var x = classNameS.split(/\s/), s = fromElement.className.split(/\s/), r = [];
  for(var i=0,l=s.length; i<l; i++){
    if(!iA(s[i], x))r.push(s[i]);
  }
  fromElement.className = r.join(' ');
}
function addClassName(classNameS, toElement){
  var s = toElement.className.split(/\s/);
  s.push(c); toElement.className = s.join(' ');
}

1

katakan saja myElement.classList="new-class"kecuali Anda perlu mempertahankan kelas lain yang ada dalam hal ini Anda dapat menggunakan classList.add, .removemetode.

var doc = document;
var divOne = doc.getElementById("one");
var goButton = doc.getElementById("go");

goButton.addEventListener("click", function() {
  divOne.classList="blue";
});
div{
  min-height:48px;
  min-width:48px;
}
.bordered{
  border: 1px solid black;
}
.green{
  background:green;
}
.blue{
  background: blue;
}
<button id="go">Change Class</button>

<div id="one" class="bordered green">

</div>


1

OK, saya pikir dalam hal ini Anda harus menggunakan jQuery atau menulis Metode Anda sendiri dalam javascript murni, preferensi saya adalah menambahkan metode saya sendiri daripada menyuntikkan semua jQuery ke aplikasi saya jika saya tidak membutuhkannya karena alasan lain.

Saya ingin melakukan sesuatu seperti di bawah ini sebagai metode kerangka kerja javascript saya untuk menambahkan beberapa fungsi yang menangani penambahan kelas, menghapus kelas, dll mirip dengan jQuery, ini didukung penuh di IE9 +, juga kode saya ditulis dalam ES6, jadi Anda perlu untuk memastikan browser Anda mendukungnya atau Anda menggunakan sesuatu seperti babel, jika tidak perlu menggunakan sintaks ES5 dalam kode Anda, juga dengan cara ini, kami menemukan elemen melalui ID, yang berarti elemen perlu memiliki ID yang akan dipilih:

//simple javascript utils for class management in ES6
var classUtil = {

  addClass: (id, cl) => {
    document.getElementById(id).classList.add(cl);
  },

  removeClass: (id, cl) => {
    document.getElementById(id).classList.remove(cl);
  },

  hasClass: (id, cl) => {
    return document.getElementById(id).classList.contains(cl);
  },

  toggleClass: (id, cl) => {
    document.getElementById(id).classList.toggle(cl);
  }

}

dan Anda dapat memanggil menggunakannya seperti di bawah ini, bayangkan elemen Anda memiliki id 'id' dan kelas 'kelas', pastikan Anda meneruskannya sebagai string, Anda dapat menggunakan util seperti di bawah ini:

classUtil.addClass('myId', 'myClass');
classUtil.removeClass('myId', 'myClass');
classUtil.hasClass('myId', 'myClass');
classUtil.toggleClass('myId', 'myClass');

1

classList API DOM:

Cara yang sangat mudah untuk menambah dan menghapus kelas adalah classListDOM API. API ini memungkinkan kami untuk memilih semua kelas elemen DOM tertentu untuk mengubah daftar menggunakan javascript. Sebagai contoh:

const el = document.getElementById("main");
console.log(el.classList);
<div class="content wrapper animated" id="main"></div>

Kita dapat mengamati dalam log bahwa kita mendapatkan kembali suatu objek dengan tidak hanya kelas-kelas elemen, tetapi juga banyak metode dan properti bantu. Objek ini mewarisi dari antarmuka DOMTokenList , antarmuka yang digunakan dalam DOM untuk mewakili satu set token yang dipisahkan ruang (seperti kelas).

Contoh:

const el = document.getElementById('container');


function addClass () {
   el.classList.add('newclass');
}


function replaceClass () {
     el.classList.replace('foo', 'newFoo');
}


function removeClass () {
       el.classList.remove('bar');
}
button{
  margin: 20px;
}

.foo{
  color: red;
}

.newFoo {
  color: blue;
}

.bar{
  background-color:powderblue;
}

.newclass{
  border: 2px solid green;
}
<div class="foo bar" id="container">
  "Sed ut perspiciatis unde omnis 
  iste natus error sit voluptatem accusantium doloremque laudantium, 
  totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et 
  quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam 
  voluptatem quia voluptas 
 </div>
  
<button onclick="addClass()">AddClass</button>
  
<button onclick="replaceClass()">ReplaceClass</button>
  
<button onclick="removeClass()">removeClass</button>
  


1

Ya ada banyak cara untuk melakukan ini. Dalam sintaks ES6 kita dapat mencapai dengan mudah. Gunakan kode ini untuk menambahkan dan menghapus kelas.

const tabs=document.querySelectorAll('.menu li');

for(let tab of tabs){
  
  tab.onclick=function(){
    
  let activetab=document.querySelectorAll('li.active');
    
  activetab[0].classList.remove('active')
  
    tab.classList.add('active'); 
  }
  
}
body {
    padding:20px;
    font-family:sans-serif;    
}

ul {
    margin:20px 0;
    list-style:none;
}

li {
    background:#dfdfdf;
    padding:10px;
    margin:6px 0;
    cursor:pointer;
}

li.active {
    background:#2794c7;
    font-weight:bold;
    color:#ffffff;
}
<i>Please click an item:</i>

<ul class="menu">
  <li class="active"><span>Three</span></li>
  <li><span>Two</span></li>
  <li><span>One</span></li>
</ul>


1
function classed(el, class_name, add_class) {
  const re = new RegExp("(?:^|\\s)" + class_name + "(?!\\S)", "g");
  if (add_class && !el.className.match(re)) el.className += " " + class_name
  else if (!add_class) el.className = el.className.replace(re, '');
}

menggunakan jawaban yang diterima di atas di sini adalah fungsi lintas-browser sederhana untuk menambah dan menghapus kelas

tambahkan kelas:

classed(document.getElementById("denis"), "active", true)

hapus kelas:

classed(document.getElementById("denis"), "active", false)

1

Banyak jawaban, banyak jawaban bagus.

TL; DR:

document.getElementById('id').className = 'class'

ATAU

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

Itu dia.

Dan, jika Anda benar-benar ingin tahu mengapa dan mendidik diri sendiri maka saya sarankan membaca jawaban Peter Boughton , itu sempurna.

Catatan:
Ini dimungkinkan dengan ( dokumen atau acara ):

  • getElementById()
  • getElementsByClassName()
  • querySelector()
  • querySelectorAll()

1

Ada className properti di javascript untuk mengubah nama kelas elemen HTML. Nilai kelas yang ada akan diganti dengan yang baru, yang telah Anda tetapkan di className.

<!DOCTYPE html>
<html>
<head>
<title>How to change class of an HTML element in Javascript?</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h1 align="center"><i class="fa fa-home" id="icon"></i></h1><br />

<center><button id="change-class">Change Class</button></center>

<script>
var change_class=document.getElementById("change-class");
change_class.onclick=function()
{
    var icon=document.getElementById("icon");
    icon.className="fa fa-gear";
}

</script>
</body>
</html>

Kredit - https://jaischool.com/javascript-lang/how-to-change-class-name-of-an-html-element-in-javascript.html


1

Pertanyaan OP adalah Bagaimana saya bisa mengubah kelas elemen dengan JavaScript?

Browser modern memungkinkan Anda melakukan ini dengan satu baris javascript :

document.getElementById('id').classList.replace('span1','span2')

The classListatribut menyediakan DOMTokenList yang memiliki berbagai metode . Anda dapat beroperasi pada classList elemen menggunakan manipulasi sederhana seperti add () , hapus () atau ganti () . Atau dapatkan sangat canggih dan memanipulasi kelas seperti Anda akan objek atau Peta dengan kunci () , nilai () , entri ()

Jawaban Peter Boughton adalah jawaban yang bagus tetapi sekarang sudah lebih dari satu dekade. Semua browser modern sekarang mendukung DOMTokenList - lihat https://caniuse.com/#search=classList dan bahkan IE11 mendukung beberapa metode DOMTokenList


1

mencoba

element.className='second'


-2

Kode JavaScript yang berfungsi:

<div id="div_add" class="div_add">Add class from Javascript</div>
<div id="div_replace" class="div_replace">Replace class from Javascript</div>
<div id="div_remove" class="div_remove">Remove class from Javascript</div>
<button onClick="div_add_class();">Add class from Javascript</button>
<button onClick="div_replace_class();">Replace class from Javascript</button>
<button onClick="div_remove_class();">Remove class from Javascript</button>
<script type="text/javascript">
    function div_add_class()
    {
        document.getElementById("div_add").className += " div_added";
    }
    function div_replace_class()
    {
        document.getElementById("div_replace").className = "div_replaced";
    }
    function div_remove_class()
    {
        document.getElementById("div_remove").className = "";
    }
</script>

Anda dapat mengunduh kode yang berfungsi dari tautan ini .


1
Ini akan memecah elemen dengan lebih dari satu kelas.
gcampbell

-4

Berikut adalah kode jQuery sederhana untuk melakukan itu.

$(".class1").click(function(argument) {
    $(".parentclass").removeClass("classtoremove");
    setTimeout(function (argument) {
        $(".parentclass").addClass("classtoadd");
    }, 100);
});

Sini,

  • Class1 adalah pendengar acara.
  • Kelas induk adalah kelas yang menampung kelas yang ingin Anda ubah
  • Classtoremove adalah kelas lama yang Anda miliki.
  • Kelas yang akan ditambahkan adalah kelas baru yang ingin Anda tambahkan.
  • 100 adalah waktu tunda selama kelas diubah.

Semoga berhasil.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.