用js改变字体颜色

Question

我想改变

id="navbar"

当页面处于深色模式时字体颜色，当页面切换到浅色模式时使字体颜色恢复。 开关是用js做的：

const onClick = () => {
  theme.value = theme.value === 'light'
    ? 'dark'
    : 'light'

  setPreference()
}

const getColorPreference = () => {
  if (localStorage.getItem(storageKey))
    return localStorage.getItem(storageKey)
  else
    return window.matchMedia('(prefers-color-scheme: dark)').matches
      ? 'dark'
      : 'light'
}

const setPreference = () => {
  localStorage.setItem(storageKey, theme.value)
  reflectPreference()
}

const reflectPreference = () => {
  document.firstElementChild
    .setAttribute('data-theme', theme.value)

  document
    .querySelector('#theme-toggle')
    ?.setAttribute('aria-label', theme.value)
}

const theme = {
  value: getColorPreference()
}

背景设置在这里

html {
    background: linear-gradient(135deg, #a1c4fd 10%, #c2e9fb 90%);
    block-size: 100%;
    color-scheme: light;
    background-attachment: fixed;
}

html[data-theme=dark] {
    background: linear-gradient(135deg, #061c43 10%, #08101f 90%);
    color-scheme: dark;
    background-attachment: fixed;
    
}

#navbar ul li[data-theme=dark]  {
    padding: 10px;
    border-radius: 25px;
    float: right;
    margin-left: 3px;
    margin-right: 8px;
    font-weight: 500;
    color: white;
    box-shadow: -5px -5px 8px #ffffff60,5px 5px 10px #00000060;
}

那没有做任何事情。 我错过了什么？

Answer 1

如果你想使用 js 更改元素的颜色，你必须在这个例子中了解 DOM HTML 我正在尝试更改某些元素的颜色

<!DOCTYPE html>
<html>
<body>

<h2 id="myH2">This is an example h2</h2>
<p id="myP">This is an example paragraph.</p>
<p id="myP2">This is also an example paragraph.</p>
<div id="myDiv">This is an example div.</div>
<br>

<button type="button" onclick="myFunction()">Set text color</button>

<script>
 function myFunction() {
 document.getElementById("myH2").style.color = "#ff0000";
 document.getElementById("myP").style.color = "magenta";
 document.getElementById("myP2").style.color = "blue";
 document.getElementById("myDiv").style.color = "lightblue";
  }
</script>

</body>
</html>

Answer 2

只需这样做：

const reflectPreference = () => {
  document.firstElementChild.setAttribute('data-theme', theme.value);

  document.querySelector('#theme-toggle')?.setAttribute('aria-label', theme.value);

  document.getElementById("navbar").style.fontColor = theme.value === "dark" ? "white" : "black";
}

在这里阅读更多。

用js改变字体颜色

问题描述

2 个解决方案

解决方案1
0 2022-11-27 13:56:31

解决方案2
0 已采纳 2022-11-27 15:13:30

用js改变字体颜色

问题描述

2 个解决方案

解决方案1 0 2022-11-27 13:56:31

解决方案2 0 已采纳 2022-11-27 15:13:30

解决方案1
0 2022-11-27 13:56:31

解决方案2
0 已采纳 2022-11-27 15:13:30