班级风格不起作用

Question

当我点击“夜晚”时，我试图将class = css中的单词颜色更改为白色。按钮，但它不工作，而所有其他字的颜色改变，因为我的意思。

这是我的代码

＆＃13;

＆＃13;

    .css {
      font-weight: bold;
      color: pink;
    }
    #first {
      color: lightblue;
    }
    span {
      font-weight: lighter;
      color: green;
    }

＆＃13;

    <input type="button" value="night"
    onclick= "
    document.querySelector('body').style.backgroundColor = 'darkblue';
    document.querySelector('body').style.color = 'yellow';
    document.querySelector('.css').style.color = 'white';
    document.querySelector('#first').style.color = 'orange';
    ">
    <input type="button" value="day"
    onclick ="
    document.querySelector('body').style.backgroundColor = 'white';
    document.querySelector('body').style.color = 'black';
    document.querySelector('.css').style.color = 'pink';
    document.querySelector('#first').style.color = 'lightblue';
    ">
    <h1><a href="index.html">WEB</a></h1>
    <h2 style="background-color:lightblue; color:Tomato;">CSS</h2>
    <span id="first" class="css">CSS</span> is a language that describes the style of an HTML document.
    <span class="css">CSS</span>  describes how <span>HTML</span> elements should be displayed.
    This tutorial will teach you <span class="css">CSS</span>  from basic to advanced.

＆＃13;

＆＃13;

＆＃13;

Answer 1

正如其他人所提到的，document.querySelector()只会选择一个元素，第一个找到它，document.querySelectorAll()会找到所有元素，但这仍然不是最好的方法。

您应该使用event listeners而不是内联事件处理程序，并且切换类（此处在body上完成）比更改内联样式更有效，也是推荐的方式。

随之而来的就是这么简单。

Stack snippet

＆＃13;

＆＃13;

document.querySelector('input[value="night"]').addEventListener('click', function() {
  document.querySelector('body').classList.add('night');
});
document.querySelector('input[value="day"]').addEventListener('click', function() {
  document.querySelector('body').classList.remove('night');
});

＆＃13;

.css {
  font-weight: bold;
  color: pink;
}

#first {
  color: lightblue;
}

span {
  font-weight: lighter;
  color: green;
}

body.night {
  background-color: darkblue;
  color: yellow;
}

.night .css {
  font-weight: bold;
  color: white;
}

.night #first {
  color: orange;
}

.night span {
  font-weight: lighter;
  color: ;
}

＆＃13;

<input type="button" value="night">
<input type="button" value="day">
<h1><a href="index.html">WEB</a></h1>
<h2 style="background-color:lightblue; color:Tomato;">CSS</h2>
<span id="first" class="css">CSS</span> is a language that describes the style of an HTML document.
<span class="css">CSS</span> describes how <span>HTML</span> elements should be displayed. This tutorial will teach you <span class="css">CSS</span> from basic to advanced.

＆＃13;

＆＃13;

＆＃13;

只需一个按钮即可完成此操作

＆＃13;

＆＃13;

document.querySelector('input[type="button"]').addEventListener('click', function() {
  this.value = (this.value == 'Night') ? 'Day' : 'Night';
  document.querySelector('body').classList.toggle('night');
});

＆＃13;

.css {
  font-weight: bold;
  color: pink;
}

#first {
  color: lightblue;
}

span {
  font-weight: lighter;
  color: green;
}

body.night {
  background-color: darkblue;
  color: yellow;
}

.night .css {
  font-weight: bold;
  color: white;
}

.night #first {
  color: orange;
}

.night span {
  font-weight: lighter;
  color: ;
}

＆＃13;

<input type="button" value="Night">
<h1><a href="index.html">WEB</a></h1>
<h2 style="background-color:lightblue; color:Tomato;">CSS</h2>
<span id="first" class="css">CSS</span> is a language that describes the style of an HTML document.
<span class="css">CSS</span> describes how <span>HTML</span> elements should be displayed. This tutorial will teach you <span class="css">CSS</span> from basic to advanced.

＆＃13;

＆＃13;

＆＃13;

Answer 2

querySelector只选择一个元素，因此当您document.querySelector('.css')并指定其样式时，您只需更改单个元素的样式。

使用querySelectorAll和forEach代替迭代css元素：

＆＃13;

＆＃13;

.css {
  font-weight: bold;
  color: pink;
}

#first {
  color: lightblue;
}

span {
  font-weight: lighter;
  color: green;
}

＆＃13;

<input type="button" value="night" onclick="
    document.querySelector('body').style.backgroundColor = 'darkblue';
    document.querySelector('body').style.color = 'yellow';
    document.querySelectorAll('.css').forEach(elm => elm.style.color = 'white');
    document.querySelector('#first').style.color = 'orange';
    ">
<input type="button" value="day" onclick="
    document.querySelector('body').style.backgroundColor = 'white';
    document.querySelector('body').style.color = 'black';
    document.querySelectorAll('.css').forEach(elm => elm.style.color = 'pink');
    document.querySelector('#first').style.color = 'lightblue';
    ">
<h1><a href="index.html">WEB</a></h1>
<h2 style="background-color:lightblue; color:Tomato;">CSS</h2>
<span id="first" class="css">CSS</span> is a language that describes the style of an HTML document.
<span class="css">CSS</span> describes how <span>HTML</span> elements should be displayed. This tutorial will teach you <span class="css">CSS</span> from basic to advanced.

＆＃13;

＆＃13;

＆＃13;

但内联处理程序与eval一样糟糕，应该避免 - 在Javascript中正确附加它们，相反，如果可能的话：

＆＃13;

＆＃13;

document.querySelector('input[value="night"]').onclick = () => {
  document.querySelector('body').style.backgroundColor = 'darkblue';
  document.querySelector('body').style.color = 'yellow';
  document.querySelectorAll('.css').forEach(elm => elm.style.color = 'white');
  document.querySelector('#first').style.color = 'orange';
}
document.querySelector('input[value="day"]').onclick = () => {
  document.querySelector('body').style.backgroundColor = 'white';
  document.querySelector('body').style.color = 'black';
  document.querySelectorAll('.css').forEach(elm => elm.style.color = 'pink');
  document.querySelector('#first').style.color = 'lightblue';
}

＆＃13;

.css {
  font-weight: bold;
  color: pink;
}

#first {
  color: lightblue;
}

span {
  font-weight: lighter;
  color: green;
}

＆＃13;

<input type="button" value="night">
<input type="button" value="day">
<h1><a href="index.html">WEB</a></h1>
<h2 style="background-color:lightblue; color:Tomato;">CSS</h2>
<span id="first" class="css">CSS</span> is a language that describes the style of an HTML document.
<span class="css">CSS</span> describes how <span>HTML</span> elements should be displayed. This tutorial will teach you <span class="css">CSS</span> from basic to advanced.

＆＃13;

＆＃13;

＆＃13;

Answer 3

当您定位多个元素时，您正在使用querySelector。请改用querySelectorAll。

此外，我建议您将css与js分开，如下所示。

＆＃13;

＆＃13;

function changeCssClassItemsColor(color) {
  const cssItems = document.querySelectorAll('.css');

  cssItems.forEach(function(item) {
    item.style.color = color;
  });
}

function switchToNight() {
  document.querySelector('body').style.backgroundColor = 'darkblue';
  document.querySelector('body').style.color = 'yellow';
  document.querySelector('#first').style.color = 'orange';

  changeCssClassItemsColor('white');
}

function switchToDay() {
  document.querySelector('body').style.backgroundColor = 'white';
  document.querySelector('body').style.color = 'black';
  document.querySelector('#first').style.color = 'lightblue';

  changeCssClassItemsColor('pink');

}

＆＃13;

.css {
  font-weight: bold;
  color: pink;
}

#first {
  color: lightblue;
}

span {
  font-weight: lighter;
  color: green;
}

＆＃13;

<input type="button" value="night" onclick="switchToNight()">

<input type="button" value="day" onclick="switchToDay()">

<h1><a href="index.html">WEB</a></h1>

<h2 style="background-color:lightblue; color:Tomato;">CSS</h2>

<span id="first" class="css">CSS</span> is a language that describes the style of an HTML document.

<span class="css">CSS</span> describes how <span>HTML</span> elements should be displayed. This tutorial will teach you <span class="css">CSS</span> from basic to advanced.

＆＃13;

＆＃13;

＆＃13;