Question

var toggleTheme = document.getElementById("toggleTheme");

function toLight() {
  document.body.style.color = black;
  document.body.style.background-color = white;
  toggleTheme.innerHTML = "Dark Theme";
  toggleTheme.addEventListener("click", toDark);
  toggleTheme.removeEventListener("click", toLight);
}

function toDark() {
  document.body.style.color = white;
  document.body.style.background-color = black;
  toggleTheme.innerHTML = "Light Theme";
  toggleTheme.addEventListener("click", toLight);
  toggleTheme.removeEventListener("click", toDark);
}

toggleTheme.addEventListener("click", toLight);

u {
  cursor: pointer;
  position: absolute;
  bottom: 10px;
  right: 50px;
}

<u id="toggleTheme">Light Theme</u>

代码片段是我正在制作的更大的JS网页游戏的一部分。 eventListener显然不起作用，因为单击带下划线的文本不会执行任何操作。不仅如此，当上面的代码片段没有被注释掉时，webgame也不会运行。但是，当我将代码注释掉时，webgame按设计运行。请指教。谢谢。

编辑：我将document.body.style.background-color替换为document.body.style.backgroundColor并修复了对程序其余部分的干扰，但主题切换器仍然没有切换主题。

Answer 1

您的代码不是有效的JavaScript代码，原因如下：

yyy

这应该是：

document.body.style.color = black;
document.body.style.background - color = white;

否则您没有有效的字符串和对象属性。对于其他函数中的代码也是如此，因此您还需要更新它。

Answer 2

您的颜色值不是字符串，您的属性分配必须是：

这：document.body.style.backgroundColor
不是这个：document.body.style.background-color

JavaScript不会在变量名中使用破折号。

var toggleTheme = document.getElementById("toggleTheme");

function toLight() {
  document.body.style.color = 'black';
  document.body.style.backgroundColor = 'white';
  toggleTheme.innerHTML = "Dark Theme";
  toggleTheme.addEventListener("click", toDark);
  toggleTheme.removeEventListener("click", toLight);
}

function toDark() {
  document.body.style.color = 'white';
  document.body.style.backgroundColor = 'black';
  toggleTheme.innerHTML = "Light Theme";
  toggleTheme.addEventListener("click", toLight);
  toggleTheme.removeEventListener("click", toDark);
}

toggleTheme.addEventListener("click", toDark);

u {
  cursor: pointer;
  position: absolute;
  bottom: 10px;
  right: 50px;
}

<h1>Hello World</h1>
<p>Color-theme toggler.</p>
<u id="toggleTheme">Dark Theme</u>

另一种方法

更好，更具扩展性的解决方案是切换类名并将所有样式保存在CSS文件中。

var themes = {
  'dark' : {
    listener : function() { toggleState('dark', 'light'); }
  },
  'light' : {
    listener : function() { toggleState('light', 'dark'); }
  }
}

var toggleTheme = document.getElementById("toggle-theme");
toggleState('light', 'dark');

function toggleState(oldState, newState) {
  toggleTheme.innerHTML = capitalize(oldState) + " Theme";
  Object.keys(themes).forEach(theme => {
    if (newState === theme) {
      addClass(document.body, 'theme-' + theme);
      toggleTheme.addEventListener("click", themes[theme].listener);
    } else {
      removeClass(document.body, 'theme-' + theme);
      toggleTheme.removeEventListener("click", themes[theme].listener);
    }
  });
}

function addClass(el, className) {
  if (el.classList) el.classList.add(className);
  else el.className += ' ' + className;
}
function removeClass(el, className) {
  if (el.classList) el.classList.remove(className);
else el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}
function capitalize(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

u {
  cursor: pointer;
  position: absolute;
  bottom: 10px;
  right: 50px;
}

/** Light Theme */
body.theme-light {
  color : black;
  background-color: white;
}

/** Dark Theme */
body.theme-dark {
  color : white;
  background-color: black;
}

<h1>Hello World</h1>
<p>Color-theme toggler.</p>
<u id="toggle-theme">Dark Theme</u>

我的暗光主题切换器不起作用

2 个答案:

另一种方法