将类添加到“html”与“body”元素上以切换暗模式答案

【问题标题】：Adding class to "html" vs. on "body" element for Toggling dark mode将类添加到“html”与“body”元素上以切换暗模式
【发布时间】：2022-08-15 00:55:50
【问题描述】：

我想知道哪个更好，更有效。

目前我正在向 html 标签添加类，所以代码看起来像这样

<html class=\"dark\">

我想知道与我将类添加到“body”标签相比是否有缺点，如下所示：

<body class=\"dark\">

我可以做任何一个，我只想知道哪个更好，如果有任何缺点或浏览器不兼容/错误问题，我可能会遇到做一个而不是另一个。

标签： html css

【解决方案1】：

不要切换类使用不同的 CSS 文件。

前任：

索引.html

<html>
<head>
<title>hi</title>

<link rel="stylesheet" id="style" href="light.css">
</head>
<body>
<h1>Hey!</h1>
<a onclick="togleDark()">Click to toggle!</a>


<script>
function toggleDark() {
    const el = document.getElementById("style");
    if (el.href.match("light.css")) {
      el.href = "dark.css";
    } else {
      el.href = "light.css";
    }
}
</script>
</body>
</html>

光.css

body {
    color: black;
    background-color: white;
}

黑暗的.css

body {
    color: white;
    background-color: black;
}

希望这可以帮助！

【讨论】：

我可以知道为什么吗？我也可以这样做，但在我的用例中，我发现切换类更容易维护，因为我只是使用 CSS 变量来更改样式本身，并且每当我需要更改特定的 CSS 属性时，我只需要在1个CSS文件
最好切换文件，这样你的 CSS 就不会变得凌乱，也更容易。
我已经使用该技术多年，现在我切换到“类切换”，我可以证明维护类切换技术更容易。想象一下添加一个元素（一个按钮）。然后使用不同的主题（我的网站有 5 个主题，将来可能会更多）它有不同的颜色或设计或背景。如果要维护多个样式表，则必须在多个样式表上更改/添加同一按钮的 CSS 属性。但是，通过类切换，您只需要根据类更改 CSS 变量的值。我只是根据经验说话。
除了添加元素之外，如果您需要更改或删除一个元素，则必须在多个 CSS 文件中删除它们的 CSS 属性，如果您忘记从其中任何一个文件中删除 1，那么该代码将变得混乱且无用。我需要补充一个事实，即我作为一个全栈开发人员独自从事这个项目。如果有专门的前端开发人员来完成这项工作，那么使用多个样式表可能不是什么大问题。谢谢你的意见。