Question

我正在尝试为夜间阅读创建一种黑暗模式切换器，问题是如何将所有黑色文本切换为白色（不同p标签和不同h标签中的黑色文本各自都有自己的类，请参见代码段）我对彩色文字很好，不需要切换它，我尝试使用属性选择器，但运气不佳

body.dark-mode [color=black] {
color:white;

}

function toggleDarkLight() {
  var body = document.getElementById("body");
  var currentClass = body.className;
  body.className = currentClass == "dark-mode" ? "light-mode" : "dark-mode";
}

.three{
color:green;
}
.first{
color:blue;
}
.one {
color:red;
}
.another{
color:black
}

body.dark-mode {
  background-color: #111;
  
}
body.dark-mode button {
  background-color: #eee;
  color: #111;
}
body.light-mode {
  background-color: #eee;
  
}

body.light-mode button {
  background-color: #111;
  color: #eee;
}

<body id="body" class="dark-mode">
  <h1 class="three">Dark/Light Mode Switcher</h1>
   
  <button type="button" name="dark_light" onclick="toggleDarkLight()" title="Toggle dark/light mode"></button>
  <div>
  <h1 class="first">title</h1>
  <h1 class="some">title 2</h1>
  <p class="one">Just press the button above to toggle!</p>
  <p class="another"> some text</p>
  </div>
  </body>

Answer 1

这应该做到。

function toggleDarkLight() {
  var body = document.getElementById("body");
  var currentClass = body.className;
  body.className = currentClass == "dark-mode" ? "light-mode" : "dark-mode";
}

.three{
color:green;
}
.first{
color:blue;
}
.one {
color:red;
}
.another{
color:black
}

.dark-mode .some {
  color:white
}
.dark-mode .another{
color:white
}

body.dark-mode {
  background-color: #111;
  
}
body.dark-mode button {
  background-color: #eee;
  color: #111;
}
body.light-mode {
  background-color: #eee;
  
}

body.light-mode button {
  background-color: #111;
  color: #eee;
}

<body id="body" class="dark-mode">
  <h1 class="three">Dark/Light Mode Switcher</h1>
   
  <button type="button" name="dark_light" onclick="toggleDarkLight()" title="Toggle dark/light mode"></button>
  <div>
  <h1 class="first">title</h1>
  <h1 class="some">title 2</h1>
  <p class="one">Just press the button above to toggle!</p>
  <p class="another"> some text</p>
  </div>
  </body>

Answer 2

在CSS中没有这样的选择器（并且有充分的理由-毕竟它将导致无限的反馈循环）。您只需要手动定位每个单独的类-或者，如果合理的话，只需使用body.dark-mode * { color: white; }将所有内容涂成白色-然后排除您想要保持不同颜色的元素即可。也许您可以使用js。然后像这样的事情可能会有所帮助：

https://codepen.io/anon/pen/OdyPJG

document.querySelectorAll("*"),
  i=0, ii=allElements.length;

  for(i; i<ii; i++){
    let element = allElements[i]

    if(getComputedStyle(element).color === 'rgb(0, 0, 0)'){
      element.classList.add('white')
    }
  }

Answer 3

您可以创建一个额外的类，该类使特定元素样式的更改取决于主体的类。

据我所知，您不能创建依赖于元素已经具有的特定颜色的样式。

function toggleDarkLight() {
  var body = document.getElementById("body");
  var currentClass = body.className;
  body.className = currentClass == "dark-mode" ? "light-mode" : "dark-mode";
}

.three{
color:green;
}
.first{
color:blue;
}
.one {
color:red;
}
.another{
color:black
}

body.dark-mode {
  background-color: #111;
  
}
body.dark-mode button {
  background-color: #eee;
  color: #111;
}
body.light-mode {
  background-color: #eee;
  
}

body.light-mode button {
  background-color: #111;
  color: #eee;
}

body.dark-mode .canToggle{
  color: #eee;
}

<body id="body" class="dark-mode">
  <h1 class="three">Dark/Light Mode Switcher</h1>
   
  <button type="button" name="dark_light" onclick="toggleDarkLight()" title="Toggle dark/light mode"></button>
  <div>
  <h1 class="first">title</h1>
  <h1 class="some canToggle">title 2</h1>
  <p class="one">Just press the button above to toggle!</p>
  <p class="another canToggle"> some text</p>
  </div>
  </body>

属性选择器重写多个元素的类

3 个答案: