Bagaimana cara mengubah kelas elemen menggunakan javascript?

Bagaimana saya bisa mengubah kelas elemen HTML sebagai respons terhadap peristiwa onClick menggunakan JavaScript?

2435
12 окт. diatur oleh Nathan Smith pada 12 Oktober 2008-10-12 23:06 '08 pada jam 11:06 2008-10-12 23:06
@ 32 jawaban
  • 1
  • 2

Metode HTML5 modern untuk mengubah kelas

Browser modern telah menambahkan classList, yang menyediakan metode yang memfasilitasi manipulasi 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, mereka tidak bekerja di Internet Explorer sampai v10, walaupun ada pad untuk menambahkan dukungan untuk itu di IE8 dan IE9 tersedia dari halaman ini . Namun, ini semakin didukung .

Solusi lintas browser sederhana

Metode JavaScript standar untuk memilih elemen menggunakan document.getElementById("Id") , yang digunakan dalam contoh berikut: Anda tentu saja dapat memperoleh elemen secara berbeda, dan dalam situasi yang tepat Anda dapat menggunakan this sebagai gantinya, memerinci, di luar cakupan jawabannya.

Untuk mengubah semua kelas untuk suatu item:

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 / tidak memengaruhi nilai yang ada, tambahkan spasi dan nama kelas baru, misalnya:

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

Untuk menghapus kelas dari suatu elemen:

Untuk menghapus satu kelas untuk elemen tanpa mempengaruhi kelas potensial lainnya, diperlukan penggantian ekspresi reguler sederhana:

 document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace ( /(?:^|\s)MyClass(?!\S)/g , '' )  

Penjelasan untuk ekspresi reguler 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 # (ie must be end of string or a space) 

Bendera g menunjukkan bahwa penggantian diu>

Untuk memeriksa apakah kelas sudah diterapkan ke elemen:

Ekspresi reguler yang sama yang digunakan di atas untuk menghapus kelas juga dapat digunakan sebagai tanda centang untuk melihat apakah kelas tertentu ada:

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


Menetapkan tindakan ini untuk mengeklik acara:

Meskipun Anda dapat menulis JavaScript >onclick="this.className+=' MyClass'" ), perilaku ini tidak disarankan. Dalam aplikasi yang lebih besar, kode yang lebih mudah dicapai dengan memisahkan markup HTML ke dalam logika interaksi JavaScript.

>

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

(Anda tidak perlu memiliki kode ini dalam tag skrip, ini hanya untuk contoh saja, dan memasukkan JavaScript dalam file terpisah mungkin lebih tepat.)

>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 ini dieksekusi setelah pemuatan HTML selesai - tanpa ini, MyElement mungkin tidak ada saat memanggil kode JavaScript sehingga string tidak berhasil.)


Struktur dan Perpustakaan JavaScript

Kode di atas adalah dalam JavaScript standar, tetapi praktik umum adalah menggunakan infrastruktur atau pustaka untuk menyederhanakan tugas-tugas umum, serta penggunaan kesalahan yang diperbaiki dan kasus-kasus ekstrem yang mungkin tidak terpikirkan saat menulis kode.

Sementara beberapa orang merasa tidak perlu menambahkan lingkungan 50KB untuk perubahan kelas sederhana, jika Anda melakukan beberapa pekerjaan JavaScript yang signifikan atau sesuatu yang mungkin memiliki perilaku lintas-peramban yang tidak biasa, patut dipertimbangkan.

(Secara kasar, perpustakaan adalah seperangkat alat yang dirancang untuk tugas tertentu, sedangkan struktur biasanya berisi beberapa perpustakaan dan melakukan serangkaian tanggung jawab penuh.)

Contoh di atas direproduksi di bawah ini menggunakan jQuery , mungkin pustaka JavaScript yang paling umum digunakan (walaupun ada yang lain yang perlu ditelusuri).

(Perhatikan bahwa $ sini adalah objek jQuery.)

Mengubah kelas menggunakan jQuery:

 $('#MyElement').addClass('MyClass'); $('#MyElement').removeClass('MyClass'); if ( $('#MyElement').hasClass('MyClass') ) 

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

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


Menetapkan fungsi ke acara klik menggunakan jQuery:

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

atau tanpa membutuhkan pengenal:

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


3486
12 окт. balasan yang diberikan oleh Peter Boughton 12 Okt 2008-10-12 23:45 '08 pukul 11:45 malam 2008-10-12 23:45

Anda juga bisa melakukan:

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

Dan untuk mengganti kelas (hapus jika masih ada yang menambahkannya):

 document.getElementById ('id'). classList.toggle ('class');
391
05 авг. Balasan diberikan oleh Tyilo 05 Agustus. 2011-08-05 20:44 '11 pada 20:44 2011-08-05 20:44

Di salah satu proyek lama saya yang tidak menggunakan jQuery, saya membuat fungsi berikut untuk menambah, menghapus, dan memeriksa apakah item 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 onclick menambahkan beberapa kelas, saya dapat menggunakan tombol 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 pastinya akan lebih baik menggunakan jQuery.

104
28 мая '11 в 10:32 2011-05-28 10:32 jawabannya diberikan oleh Andrew Orsich pada 28 Mei '11 pukul 10:32

Anda dapat menggunakan node.className seperti ini:

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

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

68
12 окт. Balas diberikan oleh Eric Wendelin pada 12 Okt 2008-10-12 23:33 '08 pada 11:33 2008-10-12 23:33

Wow, terkejut, ada begitu banyak jawaban melimpah ...

 <div class="firstClass" onclick="this.className='secondClass'"> 
45
05 янв. Balas diberikan oleh Travis J 05 Jan 2012-01-05 22:14 '12 pada pukul 10:14 2012-01-05 22: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); } } 
43
20 сент. Jawabannya diberikan oleh PseudoNinja 20 September . 2011-09-20 18:26 '11 pada 18:26 2011-09-20 18:26

Ini bekerja untuk saya:

 function setCSS(eleID) { var currTabElem = document.getElementById(eleID); currTabElem.setAttribute("class", "some_class_name"); currTabElem.setAttribute("className", "some_class_name"); } 
30
08 дек. Jawabannya diberikan oleh Gopal Krishna Ranjan 08 Des. 2011-12-08 12:36 '11 pada pukul 12:36 2011-12-08 12:36

Anda juga dapat memperluas objek HTMLElement untuk menambahkan metode untuk menambah, menghapus, beralih, dan kelas pengujian ( 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 ini (klik untuk menambah atau menghapus kelas):

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

Ini sebuah demonstrasi .

17
11 апр. Jawabannya diberikan moka 11 April. 2013-04-11 13:13 '13 pada 13:13 2013-04-11 13:13

Untuk menambahkan informasi dari struktur populer lainnya, Google Closures, lihat kelas dom / kelas:

 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 adalah goog.dom.query dengan pemilih CSS3:

 var myElement = goog.dom.query("#MyElement")[0]; 
15
27 нояб. Jawabannya diberikan oleh Ben Flynn 27 November. 2011-11-27 00:04 '11 pada 0:04, 2011-11-27 00:04

Beberapa catatan kecil dan pengaturan pada ekspresi reguler sebelumnya:

Anda ingin melakukan ini secara global jika daftar kelas memiliki nama kelas lebih dari sekali. Dan Anda mungkin ingin menghapus spasi dari ujung daftar kelas dan mengubah beberapa spasi menjadi satu ruang untuk mencegah spasi. Tak satu pun dari masalah ini yang menjadi masalah jika hanya satu kode yang cocok dengan nama kelas yang menggunakan ekspresi reguler di bawah ini dan menghapus nama sebelum menambahkannya. Tapi Nah, siapa tahu, siapa yang bisa menerima daftar nama kelas.

Ekspresi reguler ini tidak peka huruf besar kecil, sehingga kesalahan dalam nama kelas dapat ditampilkan sebelum kode digunakan di 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
02 мая '12 в 7:59 2012-05-02 07:59 jawabannya diberikan oleh Alex Robinson pada 02 Mei '12 pada 7:59 2012-05-02 07:59

Ubah kelas CSS kelas menggunakan 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 
12
28 мая '11 в 10:19 2011-05-28 10:19 Jawaban diberikan oleh Hiren Kansara pada 28 Mei '11 pada 10:19 2011-05-28 10:19

Saya akan menggunakan jQuery dan menulis sesuatu seperti ini:

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

Kode ini menambahkan fungsi yang disebut ketika elemen id disebut beberapa elemen . Fungsi menambahkan klik ke atribut kelas elemen jika belum menjadi bagian dari itu, dan menghapusnya jika ada.

Ya, Anda perlu menambahkan tautan ke pustaka jQuery di halaman Anda untuk menggunakan kode ini, tetapi setidaknya Anda dapat yakin bahwa sebagian besar fungsi di pustaka akan bekerja di hampir semua browser modern, dan ini akan menghemat waktu Anda dalam mengimplementasikan kode Anda sendiri. untuk melakukan hal yang sama.

Terima kasih

11
05 мая '12 в 5:46 2012-05-05 05:46 jawabannya diberikan shingokko 05 Mei '12 pada 5:46 2012-05-05 05:46

Line

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

seharusnya:

 document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace('/\bMyClass\b/',''); 
9
09 дек. Jawaban yang diberikan oleh Eric Bailey 09 Des 2009-12-09 01:15 '09 jam 1:15 pagi 2009-12-09 01:15

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 } 

Gunakan:

 <tr onmouseover='addHTMLClass(this,"clsSelected")' onmouseout='removeHTMLClass(this,"clsSelected")' > 
7
17 окт. jawabannya diberikan alfred 17 Oktober. 2012-10-17 15:21 '12 pada 15:21 2012-10-17 15:21

Ini adalah toggleClass toggle / add / remove class untuk 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 secara dinamis membuat kelas baru

7
28 окт. jawaban yang diberikan oleh kofifus 28 Okt. 2015-10-28 10:00 '15 pada 10:00 2015-10-28 10:00

Ubah kelas elemen dalam javascript vanilla dengan dukungan IE6

Anda dapat mencoba menggunakan properti attributes simpul untuk mempertahankan kompatibilitas dengan browser lama bahkan di IE6:

 .red { color: red; } .red:before { content: 'I am red! '; } .red:after { content: ' again'; } .blue { color: blue; } .blue:before { content: 'I am blue! ' } 
6
04 нояб. jawabannya diberikan oleh Eugene Tiurin 04 Nov. 2015-11-04 20:57 '15 pada 20:57 2015-11-04 20:57

Saya menggunakan fungsi javascript vanilla berikut dalam kode saya. Mereka menggunakan ekspresi reguler dan indexOf tetapi 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.

5
18 янв. Jawabannya diberikan oleh Salman A pada 18 Januari. 2014-01-18 12:28 '14 pada 12:28 2014-01-18 12:28

Ini bisa dilakukan.

HTML:

 <div class="red" id="text"> <a href="#" onclick="changeClass();">Fahad</a> </div> 

CSS

 .red a{ color:red; } .black a{ color:black; } 

Javascript:

 function changeClass(){ document.getElementById("text").className = "black"; } 

Feeddle

4
03 июля '16 в 17:04 2016-07-03 17:04 jawabannya diberikan oleh Fahad Uddin 03 Juli '16 pada 17:04 2016-07-03 17:04

Jika Anda ingin menghapus kelas, Anda dapat melakukan:

 ELEMENT.classList.remove("CLASS_NAME"); 

Untuk menambah kelas:

 ELEMENT.classList.add('CLASS_NAME'); 
3
14 нояб. jawabannya diberikan oleh ferralucho 14 nov. 2017-11-14 03:18 '17 pada 3:18 2017-11-14 03:18

Setelah pencarian yang panjang, saya menemukan solusi terbaik untuk manajemen kelas tanpa document.getElementById ()

 var els = [].slice.apply(document.getElementsByClassName("no-js")); for (var i = 0; i < els.length; i++) { els[i].className = els[i].className.replace(/ *\bno-js\b/g, "js"); } 

Titik awal: encoreci.net.site/questions/2069 / ...

1
10 дек. Balasan diberikan Eapo 10 Des . 2016-12-10 02:19 '16 pada 2:19 2016-12-10 02:19

Adalah baik bahwa saya menemukan berguna.

 function classChangeFn() { document.getElementById("MyElement").className = ""; } window.onload = function(){ document.getElementById("MyElement").addEventListener( 'click' , classChangeFn ); } 
1
11 апр. Balas diberikan oleh Mohammed Javed pada 11 Apr 2016-04-11 14:59 '16 pukul 14:59 2016-04-11 14:59

Dari sini : https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

Ketika Anda menekan tombol, Anda dapat mencoba:

ganti (oldClass, newClass)
Mengganti kelas yang ada dengan kelas baru.

Contoh:

 var myDiv = document.getElementById('myElement'); myDiv.classList.contains('myCssClass'); myDiv.classList.replace("myCssClass", "myCssClass_new"); 
1
27 нояб. jawabannya diberikan Kurkula 27 Nov. 2017-11-27 22:06 '17 pukul 10:06 malam 2017-11-27 22:06

Ya, ada banyak cara untuk melakukan ini. Dalam sintaks ES6 kita dapat dengan mudah mencapai. Gunakan kode ini untuk mengganti kelas tambah dan hapus.

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

API classList DOM:

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

 <div class="content wrapper animated" id="main"></div> 

Dalam jurnal kita dapat mengamati bahwa kita menerima objek tidak hanya dengan kelas elemen, tetapi juga dengan banyak metode dan properti bantu. Objek ini mewarisi dari antarmuka DOMTokenList , antarmuka yang digunakan dalam DOM untuk mewakili set token yang dipisahkan oleh spasi (misalnya, kelas).

Contoh:

 button{ margin: 20px; } .foo{ color: red; } .newFoo { color: blue; } .bar{ background-color:powderblue; } .newclass{ border: 2px solid green; } 

OK, saya pikir dalam hal ini Anda harus menggunakan jQuery atau menulis metode Anda sendiri dalam javascript murni, tetapi saya lebih suka menambahkan metode saya sendiri daripada memasukkan semua jQuery ke dalam aplikasi saya jika saya tidak membutuhkannya karena alasan lain.

Saya ingin melakukan sesuatu seperti di bawah ini sebagai metode untuk infrastruktur javascript saya, untuk menambahkan beberapa fungsi yang menangani penambahan kelas, menghapus kelas, dll., Seperti jQuery, ini didukung penuh di IE9 +, juga kode saya ditulis pada ES6, jadi Anda perlu memastikan browser Anda mendukungnya atau Anda menggunakan sesuatu seperti babel, jika tidak, Anda perlu menggunakan sintaks ES5 dalam kode Anda, juga dengan cara ini, kami menemukan elemen melalui pengidentifikasi, yang berarti bahwa elemen harus dipilih pengidentifikasi

 //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 mereka menggunakan, seperti yang ditunjukkan di bawah ini, bayangkan bahwa elemen Anda memiliki id dan kelas, pastikan Anda meneruskannya sebagai string, Anda dapat menggunakan utilitas seperti yang ditunjukkan di bawah ini:

 classUtil.addClass('myId', 'myClass'); classUtil.removeClass('myId', 'myClass'); classUtil.hasClass('myId', 'myClass'); classUtil.toggleClass('myId', 'myClass'); 
0
29 мая '17 в 16:29 2017-05-29 16:29 Jawaban diberikan oleh Alireza pada 29 Mei '17 pada 16:29 2017-05-29 16:29

Hanya berpikir saya akan melemparkannya ke:

 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(' '); } 
0
20 марта '15 в 5:35 2015-03-20 05:35 jawabannya diberikan oleh PHPglue pada 20 Maret '15 di 5:35 2015-03-20 05:35

katakan saja myElement.classList="new-class" , jika Anda tidak perlu mendukung kelas-kelas lain yang ada, dalam hal ini Anda dapat menggunakan metode classList.add, .remove .

 div{ min-height:48px; min-width:48px; } .bordered{ border: 1px solid black; } .green{ background:green; } .blue{ background: blue; } 

Pertimbangkan tombol yang akan menjadi elemen html. Biarkan kelas dihapus menjadi button1, dan kelas yang ditambahkan adalah button2, dan id adalah tombol.

 <button id="button" class="button1" onclick="ClassChange()"> 
0
20 февр. jawabannya diberikan oleh user8158111 pada 20 Feb. 2018-02-20 20:09 '18 jam 8:09 malam 2018-02-20 20:09

Kode kerja JavaScript:

 <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
05 янв. Jawaban Sajid adalah 05 Januari 2016-01-05 21:49 '16 pada 21:49 2016-01-05 21:49

Ini adalah kode jQuery sederhana untuk ini.

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

Di sini

  • Class1 adalah pendengar acara tersebut.
  • Kelas induk adalah kelas yang menampung kelas yang ingin Anda ubah.
  • Classtoremove adalah kelas lama yang Anda miliki.
  • Класс для добавления - это новый класс, который вы хотите добавить.
  • 100 - это время ожидания, в течение которого класс изменяется.

Semoga beruntung

-4
ответ дан uttamcafedeweb 06 апр. '14 в 9:10 2014-04-06 09:10
  • 1
  • 2

Другие вопросы по меткам или Задайте вопрос