简体   繁体   English

如何使用 JS DOM 修改 CSS 属性?

[英]How to modify CSS property using JS DOM?

 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>

What's wrong with this code?这段代码有什么问题? When I run it it gives me this error "Uncaught TypeError: Cannot read property 'parentElement' of undefined at HTMLButtonElement."当我运行它时,它给了我这个错误“Uncaught TypeError: Cannot read property 'parentElement' of undefined at HTMLButtonElement”。

*I don't want to apply the CSS changes on a class I need it to be applied on this specific div using DOM. *我不想在 class 上应用 CSS 更改,我需要使用 DOM 将其应用于此特定 div。

If it's just one button can't you just do this:如果它只是一个按钮,你不能这样做:

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

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

Or if you really want to use a for loop for some reason this works just fine for me:或者,如果您出于某种原因真的想使用 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";
  });
}

Better yet, make a CSS rule for a class called red and use this code to toggle that class on and off on the selected div:更好的是,为名为red的 class 制定 CSS 规则,并使用此代码在所选 div 上打开和关闭 class:

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: CSS:

.red {
  background: red
}

Try using this that way each event listener is referring to itself and backgroundColor尝试使用这种方式,每个事件侦听器都引用自己和backgroundColor

 var toggleButton = document.getElementsByClassName('toggle-button') for (var i = 0; i < toggleButton.length; i++) { toggleButton[i].addEventListener('click', function () { this.parentElement.parentElement.children[2].style.backgroundColor = "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> <div> <div> <button class="toggle-button">view</button> </div> <div>content</div> <div>the div which I want to apply changes on</div> </div>

Change getElementsByClassName to querySelectorAll('.toggle-button') as belowgetElementsByClassName更改为querySelectorAll('.toggle-button')如下

 const toggleButton = document.querySelectorAll('.toggle-button') for (let 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>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM