Question

我有一个简单的函数，它应该改变特定类的所有元素的样式，但它只会改变一个类。

<p class="test">Lorem ipsum dolor sit.</p>
<small class="test">Lorem ipsum dolor sit. Lorem ipsum dolor sit.<smallp>
<button onclick="myFunction()">Click me</button>

var listEl = document.querySelector('.test');
function myFunction() {

    listEl.style.color="red";
}

为什么它只改变一个班级？

Answer 1

您应该使用querySelectorAll。 querySelector仅返回第一次出现

Answer 2

您应该使用querySelectorAll并使用循环来完成搜索结果：

＆＃13;

var listEl = document.querySelectorAll('.test');

function myFunction() {
  for(el of listEl) el.style.color = "red";
}

＆＃13;

<p class="test">Lorem ipsum dolor sit.</p>
<small class="test">Lorem ipsum dolor sit. Lorem ipsum dolor sit.<smallp>
<button onclick="myFunction()">Click me</button>

＆＃13;

Answer 3

querySelector仅返回第一个匹配项。查看querySelectorAll而不是

Answer 4

使用querySelectorAll和forEach

function myFunction() {
  document.querySelectorAll('.test').forEach( s => s.style.color = "red");
}

<强>演示

＆＃13;

function myFunction() {
  document.querySelectorAll('.test').forEach( s => s.style.color = "red");
}

＆＃13;

<p class="test">Lorem ipsum dolor sit.</p>
<small class="test">Lorem ipsum dolor sit. Lorem ipsum dolor sit.<smallp>
    <button onclick="myFunction()">Click me</button>

＆＃13;

Answer 5

querySelector()仅返回第一场比赛。 querySelectorAll()将返回所有匹配项，但之后您必须循环遍历它们。

＆＃13;

var listEl = document.querySelectorAll('.test');

function myFunction() {

  Array.from(listEl).forEach(el => el.style.color = "red");
}

＆＃13;

<p class="test">Lorem ipsum dolor sit.</p>
<small class="test">Lorem ipsum dolor sit. Lorem ipsum dolor sit.<smallp>
    <button onclick="myFunction()">Click me</button>

＆＃13;

.style只影响所有类中的一个

5 个答案: