在 javascript 中更改按钮文本 onclick

Question

我想使用 toggle button 在我的网站上启用 dark mode 功能。我现在已经让 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 class 来更改按钮上的文本。使用一个伪元素（::before），根据body上是否存在.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 off dark mode';
}

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

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

Answer 2

function myFunction() {
   var element = document.body;
   var btn = document.getElementById("modeSwitcher");
   element.classList.toggle("dark-mode");
   if(element.classList.contains("dark-mode"))
    btn.innerHTML= "Turn off dark mode";
   else 
    btn.innerHTML= "Turn on 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()" id="modeSwitcher">Turn on dark mode</button>

在 javascript 中更改按钮文本 onclick

Changing button text onclick in javascript

html

javascript

css

togglebutton