gpt4 book ai didi

javascript - js : element. className 不起作用(创建暗模式)

转载 作者:行者123 更新时间:2023-11-28 19:29:37 27 4
gpt4 key购买 nike

我想改变很多html对象的css属性(但是在这个例子中我只拿了body来简化。我的目标是如果当前模式是light,则显示暗模式,或者显示light如果当前模式为暗模式。我的 javascript 函数不起作用。

调试.html:

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>

<meta charset="utf-8">

<link rel="stylesheet" href="debug.css">
<script src="darkmode.js"></script>

</head>

<body id="bodyElem" class="my-body light-mode">

<h1>Settings</h1>
<p>Dark mode:</p>

<button type="button" onclick="invertMode()">click</button>

</body>

</html>

调试.css:

.my-body.light-mode{
background-color: yellow;
}

.my-body.dark-mode{
background-color: black;
}

暗模式.js:

function invertMode() {
var body = document.getElementById("bodyElem");
var currentClass = body.className;
body.className = currentClass == "dark-mode" ? "light-mode" : "dark-mode";
}

最佳答案

您需要添加 ID对于 <body>标记以便能够使用您的代码找到它。

<body id="bodyElem" class="light-mode">

并使用以下方式访问它:

var body = document.getElementById("bodyElem");

如果您需要访问多个元素,您可以使用它们的 CSS 类名,例如:

document.getElementsByClassName("CLASSNAMEHERE");

然后循环它们以应用您需要的更改。

您将使用 .classList.remove("CLASSNAME")删除单个类和 .classList.add("CLASSNAME")将单个类添加到 DOM 元素

这是一个完整的示例 fiddle : https://jsfiddle.net/j3o8Lt5k/1/

关于javascript - js : element. className 不起作用(创建暗模式),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55326591/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com