javascript 使用js切换浏览器标签/主题颜色

kfgdxczn 于 2023-09-29 发布在 Java

关注(0)|答案(3)|浏览(190)

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

<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地区。p.s.我是JS新手

JavaScript

来源：https://stackoverflow.com/questions/61412862/browser-tab-theme-color-toggle-with-js

3条答案

按热度按时间

2w3kk1z51#

你的问题？**
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");
    }
}

希望这对你有帮助！

赞(0）回复(0）举报 2023-09-29

3bygqnnd2#

我不知道你到底想做什么，但这可以用一种更简单的方法来完成。你可以在运行toggle()函数的按钮上添加一个click事件，并从body元素中添加/删除类。
编辑：我已经根据你的评论更新了我的答案。在您的情况下，我认为您需要的不是hasAttribute，而是getAttribute。

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>

赞(0）回复(0）举报 2023-09-29

k10s72fa3#

解决您的问题：（通过indoxploit）
标签：

<button id="change-meta-color">BUTTON</button>

JavaScript：

var change_meta = document.getElementById("change-meta-color");
var meta_color = document.createElement("meta");
    meta_color.setAttribute("name","theme-color");
    meta_color.setAttribute("content","hsl(220,100%,50%)");
    document.getElementsByTagName("head")[0].appendChild(meta_color);
function change_color(){  
  if(meta_color.getAttribute('content') === "hsl(220,100%,50%)"){meta_color.setAttribute('content', "hsl(0,0%,0%)");}
  else{meta_color.setAttribute('content', "hsl(220,100%,50%)");}}
change_meta.addEventListener("click", change_color);

赞(0）回复(0）举报 2023-09-29

我来回答

javascript 使用js切换浏览器标签/主题颜色

3条答案

相关问题

热门标签

最新问答