Thêm lớp vào <html> bằng Javascript?

87

Làm cách nào để bạn thêm một lớp vào <html>phần tử gốc bằng Javascript?

javascript html

— Brandon Lebedev
nguồn

đây là một trong những câu hỏi tôi đã hỏi khi bắt đầu. Tôi chưa bao giờ tìm thấy một nơi tốt đã đề cập đến nó. Tôi rất vui khi thấy nó ở đây.

— Pow-Ian

Chỉ tò mò - tại sao bạn muốn làm điều này?

— David Hoerster 20/12/12

@David Để thêm dự phòng trong trường hợp Modernizr không tải. Modernizr thêm lớp "js" khi nó tải.

— Brandon Lebedev

1

Bạn thực sự nên thêm lớp "no-js" vào đánh dấu của mình nếu bạn đang sử dụng modernizr. (Nếu tải Modernizr nó sẽ loại bỏ lớp này)

— Kevin Boucher

@Kevin - Đã làm. Đi tới HTML5 Boilerplate !

— Brandon Lebedev

109

Như thế này:

var root = document.getElementsByTagName( 'html' )[0]; // '0' to assign the first (and only `HTML` tag)

root.setAttribute( 'class', 'myCssClass' );

Hoặc sử dụng nó làm dòng 'setter' của bạn để bảo toàn bất kỳ lớp nào đã áp dụng trước đó: (thanks @ ama2)

root.className += ' myCssClass';

Hoặc, tùy thuộc vào hỗ trợ trình duyệt được yêu cầu, bạn có thể sử dụng classList.add()phương pháp:

root.classList.add('myCssClass');

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList http://caniuse.com/#feat=classlist

CẬP NHẬT:

Một giải pháp thanh lịch hơn để tham chiếu HTMLphần tử có thể là:

var root = document.documentElement;
root.className += ' myCssClass';
// ... or:
//  root.classList.add('myCssClass');
//

— Kevin Boucher
nguồn

FYI, classlist.add / .remove không hoạt động trên document.documentElement.

— Andy Mercer

@AndyMercer Đó là classList.add(vỏ lạc đà).

— Kevin Boucher

Có rõ ràng đó là một lỗi đánh máy. Nhưng những gì tôi nói vẫn đúng. classListkhông hoạt động trên document.documetElement.

— Andy Mercer

Tôi đã thử nó trên ba trình duyệt khác nhau trước khi trả lời, vì vậy nó không phải là "rõ ràng là lỗi đánh máy". (Chrome, Firefox, Safari-- root.classList.add('myCssClass')hoạt động trên cả ba.) Bạn đang sử dụng IE?

— Kevin Boucher

document.documentElement.classList.adddường như hoạt động tốt ở đây. Các trình duyệt trong năm 2018 đã bắt đầu hỗ trợ điều này chưa?

— adrian

14

Điều này cũng sẽ hoạt động:

document.documentElement.className = 'myClass';

Khả năng tương thích .

Biên tập:

IE 10 cho rằng nó chỉ đọc được; chưa:

Nó đã làm việc!?

Opera hoạt động:

Làm

Tôi cũng có thể xác nhận rằng nó hoạt động trong:

Chrome 26
Firefox 19.02
Safari 5.1.7

— c24w
nguồn

Ví dụ của bạn có các KÝ TỰ KHÔNG THỂ THIẾU, cụ thể là U+200Bsau dấu nháy đơn cuối cùng, khiến nó không thể biên dịch trong webpack và các trình biên dịch khác!

— entozoon

@entozoon lạ quá! Cảm ơn vì đã chỉ ra điều đó. Tôi đã sửa nó ngay bây giờ :)

— c24w

11

Tôi khuyên bạn nên xem qua jQuery .

jQuery cách:

$("html").addClass("myClass");

— aebersold
nguồn

26

Bạn không cần jQuery để chọn một phần tử bằng JavaScript.

— David Hoerster 20/12/12

1

jQuery là infact dễ học và được sử dụng hầu hết mọi lúc, ngày nay. Nhưng có, bạn không cần nó cho nhiệm vụ này;)

— aebersold

1

yeah, đúng, chúng ta đều biết những gì jquery, nhưng trả lời một câu hỏi đơn thuần javascript với "học jquery" là những gì tôi :) ngạc nhiên

— povilasp

2

@aebersold Tôi đồng ý rằng jQuery rất dễ học và dễ sử dụng, nhưng với 50K để tải xuống (cộng với một yêu cầu bổ sung) chỉ để thêm một lớp, đó là một chút IMHO quá mức cần thiết.

— David Hoerster 20/12/12

Cái chết của jQuery! Vanilla JS để chiến thắng!

— Fresheyeball

9

document.documentElement.classList.add('myCssClass');

classListđược hỗ trợ kể từ ie10: https://caniuse.com/#search=classlist

— Tom Esterez
nguồn

7

Bạn nên nối thêm lớp không ghi đè lên nó

var headCSS = document.getElementsByTagName("html")[0].getAttribute("class") || "";
document.getElementsByTagName("html")[0].setAttribute("class",headCSS +"foo");

Tôi vẫn khuyên bạn nên sử dụng jQuery để tránh trình duyệt không tương thích

— ama2
nguồn

-2

Với Jquery ... Bạn có thể thêm lớp vào các phần tử html như sau:

$(".divclass").find("p,h1,h2,h3,figure,span,a").addClass('nameclassorid');

nameclassorid không có điểm hoặc # ở đầu

— Roos Bautista
nguồn