Tôi có một yếu tố đã có một lớp:
<div class="someclass">
<img ... id="image1" name="image1" />
</div>Bây giờ tôi muốn tạo một hàm JavaScript sẽ thêm một lớp vào div (không thay thế, nhưng thêm).
Làm thế nào tôi có thể làm điều đó?
Tôi có một yếu tố đã có một lớp:
<div class="someclass">
<img ... id="image1" name="image1" />
</div>Bây giờ tôi muốn tạo một hàm JavaScript sẽ thêm một lớp vào div (không thay thế, nhưng thêm).
Làm thế nào tôi có thể làm điều đó?
Câu trả lời:
Sử dụng phần tử. ClassList.add để thêm một lớp:
element.classList.add("my-class");Và Element.groupList.remove để xóa một lớp:
element.classList.remove("my-class");Thêm một khoảng trắng cộng với tên của lớp mới của bạn vào thuộc classNametính của phần tử. Đầu tiên, đặt một idphần tử để bạn có thể dễ dàng có được một tài liệu tham khảo.
<div id="div1" class="someclass">
<img ... id="image1" name="image1" />
</div>Sau đó
var d = document.getElementById("div1");
d.className += " otherclass";Lưu ý không gian trước otherclass. Điều quan trọng là bao gồm không gian nếu không nó thỏa hiệp các lớp hiện có trước nó trong danh sách lớp.
Xem thêm phần tử. ClassName trên MDN .
Cách dễ nhất để làm điều này mà không cần bất kỳ khung công tác nào là sử dụng phương thức Element . ClassList.add .
var element = document.getElementById("div1");
element.classList.add("otherclass");Chỉnh sửa: Và nếu bạn muốn xóa lớp khỏi một phần tử -
element.classList.remove("otherclass");Tôi không muốn phải thêm bất kỳ khoảng trống nào và tự xử lý mục nhập trùng lặp (điều này là bắt buộc khi sử dụng document.classNamephương pháp này). Có một số hạn chế của trình duyệt , nhưng bạn có thể xử lý chúng bằng polyfill .
tìm phần tử mục tiêu của bạn "d" tuy nhiên bạn muốn và sau đó:
d.className += ' additionalClass'; //note the spacebạn có thể gói nó theo những cách thông minh hơn để kiểm tra sự tồn tại trước và kiểm tra các yêu cầu không gian, v.v.
splittên lớp trên khoảng trắng, xóa cái bạn không muốn khỏi mảng kết quả, sau đó joinmảng lại ... hoặc sử dụng element.classList.remove.
Tương thích chéo
Trong ví dụ sau chúng ta thêm a classnamevào <body>phần tử. Đây là tương thích IE-8.
var a = document.body;
a.classList ? a.classList.add('classname') : a.className += ' classname';Đây là tốc ký cho những điều sau đây ..
var a = document.body;
if (a.classList) {
a.classList.add('wait');
} else {
a.className += ' wait';
}Hiệu suất
Nếu bạn quan tâm nhiều hơn đến hiệu suất so với khả năng tương thích chéo, bạn có thể rút ngắn nó xuống mức sau nhanh hơn 4%.
var z = document.body;
document.body.classList.add('wait');Tiện
Ngoài ra, bạn có thể sử dụng jQuery nhưng hiệu suất kết quả chậm hơn đáng kể. Chậm hơn 94% theo jsPerf
$('body').addClass('wait');Hiệu suất
Sử dụng jQuery có chọn lọc là phương pháp tốt nhất để xóa một lớp nếu bạn quan tâm đến hiệu năng
var a = document.body, c = ' classname';
$(a).removeClass(c);Không có jQuery, nó chậm hơn 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 ? ...tốc ký ( ) có sự khác biệt về tốc độ so với phiên bản thường ( if (a.classList) { ....) không?
classList.remove(). Tại sao bạn không sử dụng nó? nó nhanh hơn nhiều so với jQuery jsperf.com/remove- class
classListcho tất cả mọi thứ trừ việc loại bỏ các lớp học, đây là lý do tại sao tôi hỏi nó.
Một cách tiếp cận khác để thêm lớp vào phần tử bằng JavaScript thuần
Để thêm lớp:
document.getElementById("div1").classList.add("classToBeAdded");Để xóa lớp:
document.getElementById("div1").classList.remove("classToBeRemoved");Khi công việc tôi đang làm không đảm bảo sử dụng thư viện, tôi sử dụng hai chức năng sau:
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; } Xin lưu ý rằng nếu bạn thêm lớp Btn-tập với lớp thì btn-thông tin đã có mặt ở đây, điều này không thành công.
element.className.split(" ");để ngăn chặn sự cố @AlexandreDieulot được báo cáo ở đây.
Giả sử bạn đang làm nhiều hơn là chỉ thêm một lớp này (ví dụ: bạn đã có các yêu cầu không đồng bộ và cứ tiếp tục như vậy), tôi muốn giới thiệu một thư viện như Prototype hoặc jQuery .
Điều này sẽ làm cho mọi thứ bạn cần làm (bao gồm cả điều này) rất đơn giản.
Vì vậy, giả sử bạn đã có jQuery trên trang của mình ngay bây giờ, bạn có thể sử dụng mã như thế này để thêm tên lớp vào một thành phần (trong trường hợp tải, trong trường hợp này):
$(document).ready( function() {
$('#div1').addClass( 'some_other_class' );
} );Kiểm tra trình duyệt API jQuery để biết những thứ khác.
Bạn có thể sử dụng phương thức classList.add OR classList.remove để thêm / xóa một lớp khỏi một phần tử.
var nameElem = document.getElementById("name")
nameElem.classList.add("anyclss")Đoạn mã trên sẽ thêm (và KHÔNG thay thế) một lớp "bất kỳ lớp" nào vào tênElem. Tương tự, bạn có thể sử dụng phương thức classList.remove () để xóa một lớp.
nameElem.classList.remove("anyclss")Để thêm một lớp vào một phần tử, mà không xóa / ảnh hưởng đến các giá trị hiện có, hãy thêm một khoảng trắng và tên lớp mới, như vậy:
document.getElementById("MyElement").className += " MyClass";Để thay thế tất cả các lớp hiện có bằng một hoặc nhiều lớp mới, hãy đặt thuộc tính className:
document.getElementById("MyElement").className = "MyClass";(Bạn có thể sử dụng danh sách được phân tách bằng dấu cách để áp dụng nhiều lớp.)
Nếu bạn không muốn sử dụng jQuery và muốn hỗ trợ các trình duyệt cũ hơn:
function addClass(elem, clazz) {
if (!elemHasClass(elem, clazz)) {
elem.className += " " + clazz;
}
}
function elemHasClass(elem, clazz) {
return new RegExp("( |^)" + clazz + "( |$)").test(elem.className);
}Tôi biết IE9 chính thức tắt máy và chúng tôi có thể đạt được nó element.classListnhư nhiều người đã nói ở trên nhưng tôi chỉ cố gắng học cách nó hoạt động mà không cần classListsự giúp đỡ của nhiều câu trả lời ở trên tôi có thể tìm hiểu nó.
Mã bên dưới mở rộng nhiều câu trả lời ở trên và cải thiện chúng bằng cách tránh thêm các lớp trùng lặp.
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');Tôi cũng nghĩ rằng cách nhanh nhất là sử dụng Element.prototype. ClassList như trong es5: document.querySelector(".my.super-class").classList.add('new-class')
nhưng trong eg8 không có thứ gì như Element.prototype. ClassList, dù sao bạn cũng có thể polyfill nó với đoạn trích này (miễn phí chỉnh sửa và cải thiện nó ):
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
})
}Chỉ cần giải thích những gì người khác đã nói, nhiều lớp CSS được kết hợp thành một chuỗi, được phân cách bằng dấu cách. Vì vậy, nếu bạn muốn mã hóa nó, nó sẽ trông giống như thế này:
<div class="someClass otherClass yetAnotherClass">
<img ... id="image1" name="image1" />
</div>Từ đó, bạn có thể dễ dàng rút ra javascript cần thiết để thêm một lớp mới ... chỉ cần thêm một khoảng trắng theo sau là lớp mới vào thuộc tính className của phần tử. Biết điều này, bạn cũng có thể viết một hàm để loại bỏ một lớp sau này nếu cần.
Để thêm, xóa hoặc kiểm tra các lớp phần tử một cách đơn giản:
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');Bạn có thể sử dụng cách tiếp cận hiện đại tương tự như jQuery
Nếu bạn chỉ cần thay đổi một phần tử, phần tử đầu tiên mà JS sẽ tìm thấy trong DOM, bạn có thể sử dụng phần tử này:
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>Hãy ghi nhớ để lại một không gian trước tên lớp.
Nếu bạn có nhiều lớp mà bạn muốn thêm lớp mới, bạn có thể sử dụng nó như thế này
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>Tôi nghĩ sẽ tốt hơn khi sử dụng JavaScript thuần, mà chúng ta có thể chạy trên DOM của Trình duyệt.
Đây là cách chức năng để sử dụng nó. Tôi đã sử dụng ES6 nhưng cảm thấy thoải mái khi sử dụng ES5 và biểu thức chức năng hoặc định nghĩa hàm, bất cứ điều gì phù hợp với JavaScript StyleGuide của bạn.
'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)
}
}Mẫu với JS thuần túy. Trong ví dụ đầu tiên, chúng tôi nhận id của phần tử và thêm ví dụ 2 lớp.
document.addEventListener('DOMContentLoaded', function() {
document.getElementsById('tabGroup').className = "anyClass1 anyClass2";
})Trong ví dụ thứ hai, chúng tôi nhận được tên lớp của phần tử và thêm 1.
document.addEventListener('DOMContentLoaded', function() {
document.getElementsByClassName('tabGroup')[0].className = "tabGroup ready";
})Đối với những người sử dụng Lodash và muốn cập nhật classNamechuỗi:
// 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()đầu tiên, cung cấp cho div một id. Sau đó, gọi hàm 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>indexOflà một giải pháp ngây thơ và có một vấn đề đã được chỉ ra .
Bạn có thể sử dụng API querySelector để chọn phần tử của bạn và sau đó tạo một hàm với phần tử và tên lớp mới làm tham số. Sử dụng danh sách lớp cho các trình duyệt hiện đại, khác cho IE8. Sau đó, bạn có thể gọi hàm sau một sự kiện.
//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'HOẶC LÀ:
document.getElementById('come_id').classList.add('someclassname')Cách tiếp cận đầu tiên đã giúp thêm lớp khi cách tiếp cận thứ hai không hiệu quả.
Đừng quên giữ một khoảng trống ở phía trước' someclassname' trong cách tiếp cận đầu tiên.
Để loại bỏ, bạn có thể sử dụng:
document.getElementById('some_id').classList.remove('someclassname')Mã js này hoạt động với tôi
cung cấp thay thế tên lớp
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Để thêm chỉ cần sử dụng
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Để loại bỏ sử dụng
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 nameHy vọng điều này là hữu ích để sombody
element.classList.add("my-class")thay thế.