ฉันมีองค์ประกอบที่มีคลาสอยู่แล้ว:
<div class="someclass">
<img ... id="image1" name="image1" />
</div>ตอนนี้ฉันต้องการสร้างฟังก์ชั่น JavaScript ที่จะเพิ่มคลาสให้กับdiv(ไม่แทนที่ แต่เพิ่ม)
ฉันจะทำสิ่งนั้นได้อย่างไร
ฉันมีองค์ประกอบที่มีคลาสอยู่แล้ว:
<div class="someclass">
<img ... id="image1" name="image1" />
</div>ตอนนี้ฉันต้องการสร้างฟังก์ชั่น JavaScript ที่จะเพิ่มคลาสให้กับdiv(ไม่แทนที่ แต่เพิ่ม)
ฉันจะทำสิ่งนั้นได้อย่างไร
คำตอบ:
ใช้element.classList.addเพื่อเพิ่มคลาส:
element.classList.add("my-class");และelement.classList.removeเพื่อลบคลาส:
element.classList.remove("my-class");เพิ่มช่องว่างพร้อมชื่อคลาสใหม่ของคุณไปยังclassNameคุณสมบัติขององค์ประกอบ ขั้นแรกให้วางidองค์ประกอบลงบนเพื่อให้คุณสามารถรับการอ้างอิง
<div id="div1" class="someclass">
<img ... id="image1" name="image1" />
</div>แล้วก็
var d = document.getElementById("div1");
d.className += " otherclass";otherclassหมายเหตุพื้นที่ก่อน มันเป็นสิ่งสำคัญที่จะรวมช่องว่างมิฉะนั้นมันจะลดระดับชั้นเรียนที่มีอยู่ก่อนหน้านั้นในรายการชั้นเรียน
ดูเพิ่มเติมelement.className บน MDN
วิธีที่ง่ายที่สุดในการทำเช่นนี้โดยไม่มีเฟรมเวิร์กคือการใช้วิธีelement.classList.add
var element = document.getElementById("div1");
element.classList.add("otherclass");แก้ไข: และถ้าคุณต้องการลบคลาสจากองค์ประกอบ -
element.classList.remove("otherclass");ฉันไม่ต้องการเพิ่มพื้นที่ว่างใด ๆ และจัดการรายการที่ซ้ำกัน (ซึ่งจำเป็นเมื่อใช้document.classNameวิธีการ) มีบางอย่างที่มีข้อ จำกัด ในเบราว์เซอร์ที่คุณสามารถทำงานรอบตัวพวกเขาใช้ แต่polyfills
ค้นหาองค์ประกอบเป้าหมายของคุณ "d" อย่างไรก็ตามคุณต้องการแล้ว:
d.className += ' additionalClass'; //note the spaceคุณสามารถห่อสิ่งนั้นด้วยวิธีที่ชาญฉลาดเพื่อตรวจสอบการมีอยู่ก่อนและตรวจสอบข้อกำหนดของพื้นที่ ฯลฯ
splitClassName ในช่องว่างเอาคนที่คุณไม่ต้องการจากแถวที่เกิดขึ้นแล้วjoinอาร์เรย์อีกครั้ง ... element.classList.removeหรือการใช้งาน
ข้ามกันได้
ในตัวอย่างต่อไปนี้เราเพิ่มclassnameไปยัง<body>องค์ประกอบ นี่คือ IE-8 ที่เข้ากันได้
var a = document.body;
a.classList ? a.classList.add('classname') : a.className += ' classname';นี่คือการจดชวเลขสำหรับต่อไปนี้ ..
var a = document.body;
if (a.classList) {
a.classList.add('wait');
} else {
a.className += ' wait';
}ประสิทธิภาพ
หากคุณมีความกังวลเกี่ยวกับประสิทธิภาพมากกว่าความเข้ากันได้ข้ามคุณสามารถย่อให้สั้นลงเพื่อให้เร็วขึ้น 4%
var z = document.body;
document.body.classList.add('wait');ความสะดวกสบาย
หรือคุณสามารถใช้ jQuery แต่ประสิทธิภาพที่ได้จะช้ากว่าอย่างเห็นได้ชัด ช้าลง 94% ตาม jsPerf
$('body').addClass('wait');ประสิทธิภาพ
การใช้ jQuery เป็นวิธีที่ดีที่สุดในการลบชั้นเรียนหากคุณกังวลเรื่องประสิทธิภาพ
var a = document.body, c = ' classname';
$(a).removeClass(c);หากไม่มี jQuery จะช้ากว่า 32%
var a = document.body, c = ' classname';
a.className = a.className.replace( 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")a.classList ? ...) จะมีความแตกต่างของความเร็วใด ๆ เมื่อเทียบกับรุ่นปกติ ( if (a.classList) { ....) หรือไม่
classList.remove()Olso ทำไมคุณไม่ใช้มัน มันเร็วกว่า jQuery jsperf.com/remove-class-vanilla-vs-jquery
classListทุกอย่างยกเว้นลบคลาสนี่คือเหตุผลที่ฉันถาม
อีกวิธีในการเพิ่มคลาสให้กับองค์ประกอบโดยใช้ JavaScript บริสุทธิ์
สำหรับการเพิ่มคลาส:
document.getElementById("div1").classList.add("classToBeAdded");สำหรับการลบคลาส:
document.getElementById("div1").classList.remove("classToBeRemoved");เมื่องานที่ฉันทำไม่ได้รับประกันการใช้ห้องสมุดฉันใช้สองฟังก์ชันนี้:
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;
}if( cn.indexOf( classname ) != -1 ) { return; } ระวังว่าถ้าคุณเพิ่มคลาส“ btn” ด้วยคลาส“ btn-info” ที่มีอยู่ที่นี่สิ่งนี้จะล้มเหลว
element.className.split(" ");เพื่อป้องกันปัญหา @AlexandreDieulot รายงานที่นี่
สมมติว่าคุณกำลังทำมากกว่าเพียงแค่การเพิ่มนี้ชั้นหนึ่ง (เช่นคุณได้มีการร้องขอไม่ตรงกันและอื่น ๆ ที่เกิดขึ้นเช่นกัน) ผมอยากแนะนำให้ห้องสมุดเหมือนต้นแบบหรือjQuery
สิ่งนี้จะทำให้ทุกอย่างเกี่ยวกับคุณจะต้องทำ (รวมถึงนี้) ง่ายมาก
ดังนั้นสมมติว่าคุณมี jQuery บนหน้าของคุณตอนนี้คุณสามารถใช้รหัสเช่นนี้เพื่อเพิ่มชื่อคลาสให้กับองค์ประกอบ (ในการโหลดในกรณีนี้):
$(document).ready( function() {
$('#div1').addClass( 'some_other_class' );
} );ตรวจสอบเบราว์เซอร์ jQuery APIสำหรับสิ่งอื่น ๆ
คุณสามารถใช้วิธี classList.add หรือ classList.remove เพื่อเพิ่ม / ลบคลาสออกจากองค์ประกอบ
var nameElem = document.getElementById("name")
nameElem.classList.add("anyclss")โค้ดด้านบนจะเพิ่ม (และไม่แทนที่) คลาส "anyclass" ใน nameElem ในทำนองเดียวกันคุณสามารถใช้ classList.remove () วิธีการลบชั้นเรียน
nameElem.classList.remove("anyclss")ในการเพิ่มคลาสให้กับองค์ประกอบโดยไม่ต้องลบ / ส่งผลกระทบต่อค่าที่มีอยู่ให้ผนวกช่องว่างและชื่อคลาสใหม่ดังนี้:
document.getElementById("MyElement").className += " MyClass";หากต้องการแทนที่คลาสที่มีอยู่ทั้งหมดด้วยคลาสใหม่หนึ่งคลาสขึ้นไปให้ตั้งค่าแอตทริบิวต์ className:
document.getElementById("MyElement").className = "MyClass";(คุณสามารถใช้รายการที่คั่นด้วยช่องว่างเพื่อใช้หลายคลาสได้)
หากคุณไม่ต้องการใช้ jQuery และต้องการสนับสนุนเบราว์เซอร์รุ่นเก่า:
function addClass(elem, clazz) {
if (!elemHasClass(elem, clazz)) {
elem.className += " " + clazz;
}
}
function elemHasClass(elem, clazz) {
return new RegExp("( |^)" + clazz + "( |$)").test(elem.className);
}ฉันรู้ว่า IE9 ปิดตัวลงอย่างเป็นทางการและเราสามารถทำให้สำเร็จได้ด้วยelement.classListหลาย ๆ อย่างที่กล่าวไว้ข้างต้น แต่ฉันเพียงแค่พยายามเรียนรู้วิธีการทำงานโดยไม่ต้องclassListใช้ความช่วยเหลือจากคำตอบมากมายข้างต้นฉันสามารถเรียนรู้ได้
โค้ดด้านล่างขยายคำตอบมากมายและปรับปรุงโดยหลีกเลี่ยงการเพิ่มคลาสที่ซ้ำกัน
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');ฉันคิดว่าวิธีที่เร็วที่สุดคือการใช้ Element.prototype.classList เหมือนใน es5: document.querySelector(".my.super-class").classList.add('new-class')
แต่ใน ie8 ไม่มีสิ่งเช่น Element.prototype.classList อยู่แล้วคุณสามารถ polyfill กับตัวอย่างนี้ (ลดลงอิสระในการแก้ไขและปรับปรุง ):
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
})
}เพื่ออธิบายรายละเอียดเกี่ยวกับสิ่งที่คนอื่นพูด CSS คลาสต่างๆจะรวมกันเป็นสตริงเดียวคั่นด้วยช่องว่าง ดังนั้นหากคุณต้องการรหัสฮาร์ดมันก็จะมีลักษณะเช่นนี้:
<div class="someClass otherClass yetAnotherClass">
<img ... id="image1" name="image1" />
</div>จากตรงนั้นคุณสามารถได้รับจาวาสคริปต์ที่จำเป็นในการเพิ่มคลาสใหม่ ... เพียงเพิ่มช่องว่างตามด้วยคลาสใหม่ไปยังคุณสมบัติ className ขององค์ประกอบ เมื่อรู้สิ่งนี้คุณยังสามารถเขียนฟังก์ชั่นเพื่อลบคลาสในภายหลังได้หากจำเป็นต้องเกิดขึ้น
วิธีเพิ่มลบหรือตรวจสอบคลาสอิลิเมนต์ด้วยวิธีง่าย ๆ :
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');คุณสามารถใช้วิธีการที่ทันสมัยคล้ายกับ jQuery
หากคุณต้องการเปลี่ยนเพียงองค์ประกอบเดียวอันดับแรกที่ JS จะพบใน DOM คุณสามารถใช้สิ่งนี้:
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>โปรดจำไว้ว่าให้เว้นช่องว่างหนึ่งช่องก่อนชื่อชั้นเรียน
หากคุณมีหลายคลาสที่คุณต้องการเพิ่มคลาสใหม่คุณสามารถใช้คลาสนี้ได้
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>ฉันคิดว่ามันจะดีกว่าถ้าใช้จาวาสคริปต์ที่บริสุทธิ์ซึ่งเราสามารถเรียกใช้บน DOM ของเบราว์เซอร์ได้
นี่คือวิธีการใช้งาน ฉันใช้ ES6 แต่รู้สึกอิสระที่จะใช้ ES5 และการแสดงออกของฟังก์ชั่นหรือนิยามของฟังก์ชั่นใดก็ตามที่เหมาะกับ 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)
}
}ตัวอย่างด้วย JS บริสุทธิ์ ในตัวอย่างแรกเราได้รับ id องค์ประกอบของเราและเพิ่มเช่น 2 ชั้น
document.addEventListener('DOMContentLoaded', function() {
document.getElementsById('tabGroup').className = "anyClass1 anyClass2";
})ในตัวอย่างที่สองเราจะได้รับชื่อคลาสขององค์ประกอบและเพิ่มอีก 1
document.addEventListener('DOMContentLoaded', function() {
document.getElementsByClassName('tabGroup')[0].className = "tabGroup ready";
})สำหรับผู้ที่ใช้Lodashและต้องการอัพเดทclassNameสตริง:
// 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()ก่อนอื่นให้ตั้งรหัส จากนั้นฟังก์ชั่นการโทร 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>indexOfเป็นทางออกที่ไร้เดียงสาและมีปัญหาที่ชี้ไปแล้ว
คุณสามารถใช้ API querySelector เพื่อเลือกองค์ประกอบของคุณแล้วสร้างฟังก์ชั่นที่มีองค์ประกอบและชื่อคลาสใหม่เป็นพารามิเตอร์ การใช้ classlist สำหรับเบราว์เซอร์รุ่นใหม่และอื่น ๆ สำหรับ IE8 จากนั้นคุณสามารถเรียกใช้ฟังก์ชันหลังจากเหตุการณ์
//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');document.getElementById('some_id').className+=' someclassname'หรือ:
document.getElementById('come_id').classList.add('someclassname')วิธีการแรกช่วยในการเพิ่มชั้นเรียนเมื่อวิธีที่สองไม่ทำงาน
อย่าลืมที่จะรักษาพื้นที่ไว้ด้านหน้า' someclassname'ในแนวทางแรก
สำหรับการลบคุณสามารถใช้:
document.getElementById('some_id').classList.remove('someclassname')รหัส js นี้ใช้งานได้สำหรับฉัน
จัดเตรียมการเปลี่ยนชื่อคลาส
var DDCdiv = hEle.getElementBy.....
var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
for (var i=0; i< Ta.length;i++)
{
if (Ta[i] == 'visible'){
Ta[i] = 'hidden';
break;// quit for loop
}
else if (Ta[i] == 'hidden'){
Ta[i] = 'visible';
break;// quit for loop
}
}
DDCdiv.setAttribute('class',Ta.join(' ') ); // Join array with space and set class nameเพื่อเพิ่มเพียงใช้
var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
Ta.push('New class name');
// Ta.push('Another class name');//etc...
DDCdiv.setAttribute('class',Ta.join(' ') ); // Join array with space and set class nameเพื่อลบการใช้งาน
var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
for (var i=0; i< Ta.length;i++)
{
if (Ta[i] == 'visible'){
Ta.splice( i, 1 );
break;// quit for loop
}
}
DDCdiv.setAttribute('class',Ta.join(' ') ); // Join array with space and set class nameหวังว่านี่จะเป็นประโยชน์กับใครสักคน
element.classList.add("my-class")แทน