使用 js 切换浏览器选项卡/主题颜色

Question

这个概念是，在单击一个按钮时，页面内容的配色方案与浏览器选项卡颜色一起切换到深色模式。 我想出了这个：

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#ffffff">
<style>

body {
  padding: 25px;
  background-color: #ddd;
  color: black;
  font-size: 25px;
}

.btn {
    background: white;
    border: 1px solid #10101c;
    color: grey;
}

.dark-mode {
  background-color: #10101c;
  color: #778899;
}

.dark-mode .btn {
    background: #10101c;
    color: red;
    border: 1px solid #002e43;
}

</style>
</head>
<body>

<h2>Toggle Dark/Light Mode</h2>
<p>Click the button to toggle between dark and light mode for this page.</p>
<button class="btn" onclick="toggle()">Toggle dark mode</button>

<script>
function toggle() {
    var element = document.body;
    element.classList.toggle("dark-mode");
    var yo = document.querySelector("meta[name=theme-color]");

    if yo.hasAttribute("content", "#ffffff");
    {
    yo.setAttribute("content", "#10101c"); 
    }
    else {
    yo.setAttribute("content", "#ffffff");
    }
}
</script>

</body>
</html>

我哪里错了？ 主要集中区域是JS区域。 ps我是JS的新手

Answer 1

你的问题？

if 语句在if语句中的括号后有一个分号。

function toggle() {
    var element = document.body;
    element.classList.toggle("dark-mode");
    var yo = document.querySelector("meta[name=theme-color]"); //<-- this semicolon

    if yo.hasAttribute("content", "#ffffff"); //<-- this semicolon 
    {
        yo.setAttribute("content", "#10101c"); //<-- this semicolon
    }
else {
        yo.setAttribute("content", "#ffffff"); //<-- and this semicolon are all your problem
    }
}

注意：必须在 if 语句的开头和结尾加上括号。

例子：

if (9 < 10) {
    console.log("9 is less than 10")
}

.hasAttribute只接受一个参数。 你给了它两个： if yo.hasAttribute("content", "#ffffff")

试试这个 -

function toggle() {
    let element = document.body;
    element.classList.toggle("dark-mode");
    let yo = document.querySelector("meta[name=theme-color]");

    if (yo.hasAttribute("content")) {
        yo.setAttribute("content", "#10101c");
    }
else {
        yo.setAttribute("content", "#ffffff");
    }
}

希望这有帮助！

Answer 2

我不确定你到底想完成什么，但这可以通过更简单的方式完成。 您只需向运行toggle() function 的按钮添加一个点击事件，并从body元素中添加/删除 class。

编辑：我已经根据您的评论更新了我的答案。 我认为您需要getAttribute而不是在您的条件下使用hasAttribute 。

 var darkButton = document.getElementById("dark-mode"); darkButton.addEventListener("click", toggle); function toggle() { var bodyElement = document.querySelector("body"); bodyElement.classList.toggle("dark-mode"); var meta = document.querySelector("meta[name=theme-color]"); if (meta.getAttribute("content") === "#ffffff") { console.log(meta.getAttribute("content")); meta.setAttribute("content", "#10101c"); } else { console.log(meta.getAttribute("content")); meta.setAttribute("content", "#ffffff"); } }

 body { padding: 25px; background-color: #ddd; color: black; font-size: 25px; }.btn { background: white; border: 1px solid #10101c; color: grey; }.dark-mode { background-color: #10101c; color: #778899; }.dark-mode.btn { background: #10101c; color: red; border: 1px solid #002e43; }

 <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="theme-color" content="#ffffff"> </head> <body> <h2>Toggle Dark/Light Mode</h2> <p>Click the button to toggle between dark and light mode for this page.</p> <button id="dark-mode" class="btn">Toggle dark mode</button> </body>