Question

我需要一些帮助来选择下面示例中的按钮。我正在使用Wordpress，当我尝试向我的按钮添加自定义类时，它只将它添加到按钮所在的div中。

<div class="basic">
  <button class="btn">Content</button>
</div>

现在我想添加一些JS，当点击另一个按钮时，它会改变按钮的背景颜色。当我选择具有我指定的类的div时，按钮的背景颜色不会改变。我必须直接选择按钮，但我不知道如何。

感谢任何帮助

Answer 1

有几个选项可供选择：

querySelector

console.log(document.querySelector('.btn')); // Via its class name
console.log(document.querySelector('button')); // via its tag name

<div class="basic">
  <button class="btn">Content</button>
</div>

querySelector返回第一个匹配元素。

querySelectorAll会返回所有匹配元素。

getElementsByClassName

console.log(document.getElementsByClassName('btn')[0]); // Select the first element, because getElementsByClassName returns a HTMLCollection!

<div class="basic">
  <button class="btn">Content</button>
</div>

getElementsByTagName

console.log(document.getElementsByTagName('button')[0]); // Again select the first one!

<div class="basic">
  <button class="btn">Content</button>
</div>

现在让我们解决您的问题：

// You can use either querySelector, getElementsByTagName, or getElementsByClassName. I decided for querySelector

function changeColor() {
  document.querySelector('.btn').style.backgroundColor = "red";
}

<div class="basic">
  <button class="btn">Content</button><button onclick="changeColor()">Change Color!</button>
</div>

修改

如果您只想选择特定div中的按钮，可以这样做：

function changeColor() { var div = document.getElementsByClassName('basic')[0]; // Get the specific div var buttons = div.getElementsByClassName('btn'); // Get the buttons by class, but only within the div for (var i = 0; i < buttons.length; i++) { // Loop through the HTMLCollection and apply the CSS to every element buttons[i].style.backgroundColor = "red"; } }

<div class="basic"> <button class="btn">Content</button> <button class="btn">Content</button> <button class="btn">Content</button> </div> <button class="btn">I won't get selected</button> <button onclick="changeColor()">Change color</button>

如何使用Javascript选择嵌入式元素？

1 个答案: