在javascript中更改按钮文本onclick

Question

我想通过使用dark mode在我的网站上启用toggle button功能。我现在已经可以使用dark mode了，我想让按钮在关闭时显示Turn on dark mode，然后在打开时显示Turn off dark mode。

function myFunction() {
   var element = document.body;
   element.classList.toggle("dark-mode");
}

body {
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	background-color: white;
	color: black;
}

.dark-mode {
	background-color: black;
	color: white;
}

<button onclick="myFunction()">Turn on dark mode</button>

Answer 1

您可以使用主体上的全局.dark-mode类来更改按钮上的文本。使用伪元素（::before），并根据主体上.dark-mode的存在进行设置：

function myFunction() {
  var element = document.body;
  element.classList.toggle("dark-mode");
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background-color: white;
  color: black;
}

.dark-mode {
  background-color: black;
  color: white;
}

body.dark-mode .mode-button::before {
  content: 'Turn on dark mode';
}

body:not(.dark-mode) .mode-button::before {
  content: 'Turn off dark mode';
}

<button class="mode-button" onclick="myFunction()"></button>