如何切換CSS類 <body> 標簽使用vanillaJS - 沒有JQuery

Question

是否可以將CSS類應用於HTML文檔的<body>標記？

到目前為止，我一直在嘗試這樣的事情：

document.getElementsByClassName("body").add("cssClass");

希望在整個DOM上應用過濾器，以便在特定時間使頁面變暗，但保留DOM本身的所有功能。

Answer 1

或者，更短： document.body.className = 'classname';

正如Gaby建議的那樣，為了避免替換已經應用的類：

document.body.classList.add('classname')

Answer 2

 document.getElementsByTagName("body")[0].className = 'yo';

 .yo { background-color: #f90; }

Answer 3

document.getElementsByTagName('body')[0].classList.add('your-class')

getElementsByTagName()返回一個節點列表，因此您需要訪問第一個（也是唯一的）元素。

Answer 4

您需要訪問正文的類列表 - 並且TagName還返回節點列表

document.getElementsByTagName('body')[0].classList.add('cssClass')

Answer 5

幾乎，您需要使用document.getElementsByTagName()並使用如下所示：

document.getElementsByTagName('body')[0].classList.add('yourClass');

Answer 6

以下是如何使用ES6執行此操作的示例：

document.querySelector('body');

此codepen示例顯示如何切換類：

https://codepen.io/kylecasestack/pen/zpKZOq