HTML mẫu:Thêm một lớp học để một DIV với javascript
<div id="foo" class="class_one"></div>
Làm thế nào tôi có thể thêm lớp class_two
mà không cần thay thế class_one
?
Kết quả cuối cùng:
<div id="foo" class="class_one class_two"></div>
HTML mẫu:Thêm một lớp học để một DIV với javascript
<div id="foo" class="class_one"></div>
Làm thế nào tôi có thể thêm lớp class_two
mà không cần thay thế class_one
?
Kết quả cuối cùng:
<div id="foo" class="class_one class_two"></div>
Chuẩn javascript:
document.getElementById('foo').className += ' class_two'
hoặc JQuery:
$('#foo').addClass('class_two');
Bạn có thể sử dụng jQuery.
$('#YourElement').addClass('YourClass'); //add
$('#YourElement').removeClass('YourClass'); //remove
$('#YourElement').toggleClass('YourClass'); //toggle
Hoặc Javascript, nếu bạn muốn.
document.getElementById('id').classList.add('YourClass'); //add
document.getElementById('id').classList.remove('YourClass'); //remove
Thats khá gọn gàng, tôi chưa bao giờ thấy nó trước đây, là classList một api mới?/tương thích với các trình duyệt cũ hơn? –
Tôi chưa kiểm tra chúng trên tất cả các trình duyệt nhưng chúng có thể hoạt động trên các trình duyệt chính (mới nhất). – Lion
classList hiện có trên hầu hết các trình duyệt hiện đại monhttp: //caniuse.com/#feat=classlist –
Bạn có thể làm cho cuộc sống dễ dàng hơn với một vài chức năng helper:
function addClass(el, className) {
var classes = el.className.match(/\S+/g) || [];
if (!hasClass(el, className)) {
classes.push(className);
}
el.className = classes.join(' ');
}
function hasClass(el, className) {
var re = new RegExp('(^|\\s+)' + className + '(\\s+|$)');
return re.test(el.className);
}
addClass(document.getElementById('foo'), 'bar')
Kiểm tra this để thêm một lớp:
document.getElementById('foo').classList.add("class_two");
Tôi cảm thấy đây là một giải pháp tốt hơn.
hoàn hảo, cảm ơn bạn đời. – jared