时间戳

首页 > 解决方案 > 如何使用 JS DOM 修改 CSS 属性？

javascript - 如何使用 JS DOM 修改 CSS 属性？

问题描述

var toggleButton = document.getElementsByClassName('toggle-button')
for (var i = 0; i < toggleButton.length; i++) {
  toggleButton[i].addEventListener('click', function () {
      toggleButton[i].parentElement.parentElement.children[2].style.background = "red";
  });
}
<div>
  <div>
    <button class="toggle-button">view</button>
  </div>

  <div>content</div>

  <div>the div which I want to apply changes on</div>
</div>

这段代码有什么问题？当我运行它时，它给了我这个错误“Uncaught TypeError: Cannot read property 'parentElement' of undefined at HTMLButtonElement”。

*我不想在一个类上应用 CSS 更改，我需要使用 DOM 将它应用到这个特定的 div 上。

标签： javascripthtml

解决方案

如果它只是一个按钮，你不能这样做：

const toggleButtons = document.getElementsByClassName('toggle-button')

toggleButtons[0].addEventListener('click', () => {
    toggleButtons[0].parentElement.parentElement.children[2].style.background = "red";
});

或者，如果您出于某种原因真的想使用 for 循环，这对我来说很好：

var toggleButtons = document.getElementsByClassName('toggle-button')

for(let i=0; i<toggleButtons.length; i++) {
  toggleButtons[i].addEventListener('click', function () {
    toggleButtons[i].parentElement.parentElement.children[2].style.background = "red";
  });
}

更好的是，为一个名为的类创建一个 CSS 规则，red并使用此代码在所选 div 上打开和关闭该类：

var toggleButtons = document.getElementsByClassName('toggle-button')

for(let i=0; i<toggleButtons.length; i++) {
  toggleButtons[i].addEventListener('click', function () {
    toggleButtons[i].parentElement.parentElement.children[2].classList.toggle('red')
  });
}

CSS：

.red {
  background: red
}

推荐阅读