Saya memiliki sebuah elemen yang sudah memiliki kelas:
``html
Sekarang saya ingin membuat sebuah fungsi JavaScript yang akan menambahkan class untuk div
(bukan menggantikan, tapi add).
Bagaimana saya bisa melakukan itu?
Menambahkan spasi ditambah nama kelas baru untuk className
properti dari elemen. Pertama, dimasukkan 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";
Perhatikan ruang sebelum otherclass
. It's penting untuk menyertakan ruang jika tidak mengganggu kelas-kelas yang ada yang datang sebelum itu di daftar kelas.
Lihat juga elemen.className di MDN.
Cara termudah untuk melakukan hal ini tanpa framework adalah dengan menggunakan elemen.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 harus menambah ruang kosong dan entri duplikat penanganan sendiri (yang diperlukan bila menggunakan dokumen.className
approach). Ada beberapa browser keterbatasan, tetapi anda dapat bekerja di sekitar mereka menggunakan polyfills.
menemukan target elemen "d" namun anda inginkan dan kemudian:
d.className += ' additionalClass'; //note the space
anda dapat membungkus yang di pandai cara untuk memeriksa pra-eksistensi, dan memeriksa untuk kebutuhan ruang dll..
Dalam contoh berikut kita menambahkan classname
ke <body>
elemen. Ini adalah IE-8 kompatibel.
var a = document.tubuh; a.classList ? a.classList.tambahkan('classname') : a.className += ' classname';
Ini adalah singkatan berikut..
var a = document.tubuh; jika (a.classList) { a.classList.tambahkan('tunggu'); } else { a.className += ' tunggu'; }
Jika anda lebih peduli dengan kinerja yang lebih lintas-kompatibilitas anda dapat mempersingkat berikut adalah 4% lebih cepat.
var z = dokumen.tubuh; dokumen.tubuh.classList.tambahkan('tunggu');
Sebagai alternatif, anda bisa menggunakan jQuery, namun kinerja yang dihasilkan secara signifikan lebih lambat. 94% lebih lambat menurut jsPerf
$('body').addClass('tunggu');
Menggunakan jQuery selektif adalah metode terbaik untuk menghilangkan kelas jika anda khawatir dengan kinerja
var a = document.tubuh, c = ' classname'; $(a).removeClass(c);
var a = document.tubuh, c = ' classname'; a.className = a.className.mengganti( c, '' ); a.className = a.className + c;
Element("document.body").ClassNames.add("classname")
Element("document.body").ClassNames.remove("classname")
Element("document.body").ClassNames.set("classname")
YAHOO.util.Dom.hasClass(document.body,"classname")
YAHOO.util.Dom.addClass(document.body,"classname")
YAHOO.util.Dom.removeClass(document.body,"classname")
Pendekatan lain untuk menambahkan kelas untuk elemen menggunakan pure JavaScript
Untuk menambahkan kelas:
document.getElementById("div1").classList.add("classToBeAdded");
Untuk menghapus kelas:
document.getElementById("div1").classList.remove("classToBeRemoved");
Ketika pekerjaan saya'm melakukan doesn't surat perintah menggunakan perpustakaan, saya menggunakan dua fungsi:
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;
}
Dengan asumsi anda're melakukan lebih dari hanya menambahkan satu kelas (misalnya, anda've punya permintaan asynchronous dan sebagainya yang terjadi juga), saya'd merekomendasikan perpustakaan seperti Prototype atau jQuery.
Ini akan membuat hanya tentang segala sesuatu yang anda'll perlu dilakukan (termasuk yang ini) sangat sederhana.
Jadi let's mengatakan anda've punya jQuery pada halaman anda sekarang, anda bisa menggunakan kode seperti ini untuk menambahkan nama kelas untuk elemen (pada beban, dalam hal ini):
$(document).ready( function() {
$('#div1').addClass( 'some_other_class' );
} );
Check out jQuery API browser untuk hal-hal lain.
Anda dapat menggunakan classList.menambah ATAU classList.menghapus metode untuk menambahkan/menghapus kelas dari elemen.
var nameElem = document.getElementById("name")
nameElem.classList.add("anyclss")
Kode di atas akan menambah(dan TIDAK mengganti) kelas "anyclass" untuk nameElem. Demikian pula anda dapat menggunakan classList.hapus() metode untuk menghapus kelas.
nameElem.classList.remove("anyclss")
Untuk menambahkan kelas untuk elemen, tanpa menghapus/mempengaruhi nilai-nilai yang ada, menambahkan spasi dan new classname, seperti:
document.getElementById("MyElement").className += " MyClass";
Untuk mengganti semua kelas yang ada dengan satu atau lebih kelas-kelas baru, mengatur atribut className:
document.getElementById("MyElement").className = "MyClass";
(Anda dapat menggunakan daftar dibatasi ruang untuk menerapkan beberapa kelas.)
Jika anda don't ingin menggunakan jQuery dan ingin mendukung browser lama:
function addClass(elem, clazz) {
if (!elemHasClass(elem, clazz)) {
elem.className += " " + clazz;
}
}
function elemHasClass(elem, clazz) {
return new RegExp("( |^)" + clazz + "( |$)").test(elem.className);
}
Aku tahu IE9 adalah shutdown secara resmi dan kita dapat mencapainya dengan elemen.classList
seperti yang banyak diceritakan di atas, tetapi saya hanya mencoba untuk belajar bagaimana bekerja tanpa classList
dengan bantuan dari banyak jawaban di atas saya bisa belajar.
Di bawah ini kode meluas banyak jawaban di atas dan meningkatkan mereka dengan menghindari menambahkan duplikat kelas.
function addClass(element,className){
var classArray = className.split(' ');
classArray.forEach(function (className) {
if(!hasClass(element,className)){
element.className += " "+className;
}
});
}
//this will add 5 only once
addClass(document.querySelector('#getbyid'),'3 4 5 5 5');
Hanya untuk menguraikan apa yang orang lain telah mengatakan, beberapa kelas CSS digabungkan dalam sebuah string tunggal, dipisahkan oleh spasi. Dengan demikian, jika anda ingin hard-kode itu, itu hanya akan terlihat seperti ini:
<div class="someClass otherClass yetAnotherClass">
<img ... id="image1" name="image1" />
</div>
Dari sana anda dapat dengan mudah memperoleh javascript diperlukan untuk menambah kelas baru... hanya menambahkan ruang yang diikuti oleh kelas baru untuk elemen's className properti. Mengetahui hal ini, anda juga dapat menulis fungsi untuk menghapus kelas nanti harus perlu timbul.
Untuk menambahkan, menghapus atau periksa elemen kelas dengan cara yang sederhana:
var uclass = {
exists: function(elem,className){var p = new RegExp('(^| )'+className+'( |$)');return (elem.className && elem.className.match(p));},
add: function(elem,className){if(uclass.exists(elem,className)){return true;}elem.className += ' '+className;},
remove: function(elem,className){var c = elem.className;var p = new RegExp('(^| )'+className+'( |$)');c = c.replace(p,' ').replace(/ /g,' ');elem.className = c;}
};
var elem = document.getElementById('someElem');
//Add a class, only if not exists yet.
uclass.add(elem,'someClass');
//Remove class
uclass.remove(elem,'someClass');
Anda dapat menggunakan pendekatan modern yang mirip dengan jQuery
Jika anda perlu untuk mengubah hanya satu elemen, yang pertama bahwa JS akan menemukan di DOM, anda dapat menggunakan ini:
document.querySelector('.someclass').className += " red";
.red {
color: red;
}
<div class="someclass">
<p>This method will add class "red" only to first element in DOM</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
Menjaga dalam pikiran untuk meninggalkan satu ruang sebelum nama kelas.
Jika anda memiliki beberapa kelas di mana anda ingin menambahkan kelas baru, anda dapat menggunakannya seperti ini
document.querySelectorAll('.someclass').forEach(function(element) {
element.className += " red";
});
.red {
color: red;
}
<div class="someclass">
<p>This method will add class "red" to all elements in DOM that have "someclass" class.</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
Saya juga berpikir bahwa cara tercepat adalah dengan menggunakan Elemen.prototipe.classList seperti di es5: dokumen.querySelector(".saya.super-class").classList.tambahkan('baru kelas')
tapi di ie8 tidak ada hal seperti itu sebagai Elemen.prototipe.classList, pokoknya anda dapat polyfill dengan potongan ini (jatuh bebas untuk mengedit dan meningkatkan itu):
if(Element.prototype.classList === void 0){
function DOMTokenList(classes, self){
typeof classes == "string" && (classes = classes.split(' '))
while(this.length){
Array.prototype.pop.apply(this);
}
Array.prototype.push.apply(this, classes);
this.__self__ = this.__self__ || self
}
DOMTokenList.prototype.item = function (index){
return this[index];
}
DOMTokenList.prototype.contains = function (myClass){
for(var i = this.length - 1; i >= 0 ; i--){
if(this[i] === myClass){
return true;
}
}
return false
}
DOMTokenList.prototype.add = function (newClass){
if(this.contains(newClass)){
return;
}
this.__self__.className += (this.__self__.className?" ":"")+newClass;
DOMTokenList.call(this, this.__self__.className)
}
DOMTokenList.prototype.remove = function (oldClass){
if(!this.contains(newClass)){
return;
}
this[this.indexOf(oldClass)] = undefined
this.__self__.className = this.join(' ').replace(/ +/, ' ')
DOMTokenList.call(this, this.__self__.className)
}
DOMTokenList.prototype.toggle = function (aClass){
this[this.contains(aClass)? 'remove' : 'add'](aClass)
return this.contains(aClass);
}
DOMTokenList.prototype.replace = function (oldClass, newClass){
this.contains(oldClass) && this.remove(oldClass) && this.add(newClass)
}
Object.defineProperty(Element.prototype, 'classList', {
get: function() {
return new DOMTokenList( this.className, this );
},
enumerable: false
})
}
Saya pikir itu's baik untuk menggunakan pure JavaScript, yang dapat kita jalankan pada DOM Browser.
Berikut ini adalah cara fungsional untuk menggunakannya. Saya telah menggunakan ES6 tetapi merasa bebas untuk menggunakan ES5 dan fungsi ekspresi atau definisi fungsi, mana yang sesuai dengan anda JavaScript StyleGuide.
'use strict'
const oldAdd = (element, className) => {
let classes = element.className.split(' ')
if (classes.indexOf(className) < 0) {
classes.push(className)
}
element.className = classes.join(' ')
}
const oldRemove = (element, className) => {
let classes = element.className.split(' ')
const idx = classes.indexOf(className)
if (idx > -1) {
classes.splice(idx, 1)
}
element.className = classes.join(' ')
}
const addClass = (element, className) => {
if (element.classList) {
element.classList.add(className)
} else {
oldAdd(element, className)
}
}
const removeClass = (element, className) => {
if (element.classList) {
element.classList.remove(className)
} else {
oldRemove(element, className)
}
}
Sampel dengan JS murni. Dalam contoh pertama kita mendapatkan elemen's id dan tambahkan misalnya 2 kelas.
document.addEventListener('DOMContentLoaded', function() {
document.getElementsById('tabGroup').className = "anyClass1 anyClass2";
})
Dalam contoh kedua kita dapatkan elemen's nama kelas dan tambahkan 1 lebih lanjut.
document.addEventListener('DOMContentLoaded', function() {
document.getElementsByClassName('tabGroup')[0].className = "tabGroup ready";
})
Bagi mereka yang menggunakan Lodash dan ingin update className
string:
// get element reference
var elem = document.getElementById('myElement');
// add some classes. Eg. 'nav' and 'nav header'
elem.className = _.chain(elem.className).split(/[\s]+/).union(['nav','navHeader']).join(' ').value()
// remove the added classes
elem.className = _.chain(elem.className).split(/[\s]+/).difference(['nav','navHeader']).join(' ').value()
pertama, memberikan div id. Kemudian, memanggil fungsi appendClass:
<script language="javascript">
function appendClass(elementId, classToAppend){
var oldClass = document.getElementById(elementId).getAttribute("class");
if (oldClass.indexOf(classToAdd) == -1)
{
document.getElementById(elementId).setAttribute("class", classToAppend);
}
}
</script>
Anda dapat menggunakan API querySelector untuk memilih elemen anda dan kemudian membuat fungsi dengan elemen dan new classname sebagai parameter. Menggunakan classlist untuk browser modern, yang lain untuk IE8. Maka anda dapat memanggil fungsi setelah acara.
//select the dom element
var addClassVar = document.querySelector('.someclass');
//define the addclass function
var addClass = function(el,className){
if (el.classList){
el.classList.add(className);
}
else {
el.className += ' ' + className;
}
};
//call the function
addClass(addClassVar, 'newClass');