如何使用JavaScript设置DOM元素的样式

使用纯JavaScript动态将样式应用于页面元素的方式

您可能需要将CSS属性动态地应用于DOM元素。

浏览器公开了哪些API?

首先,最干净的方法之一是在元素中添加或删除类,并在CSS中使用类样式。

const element = document.querySelector('#my-element')

您可以使用classList元素及其属性add()remove()方法:

element.classList.add('myclass')
element.classList.remove('myclass')

您还可以使用来直接更改元素的每个CSS属性。style属性,它引用元素内联样式

例如,您可以使用

element.style.color = '#fff'

您可以更改边框:

element.style.border = '1px solid black'

你看到了colorborder。您可以通过使用camelCase而不是破折号(当CSS属性名称包含它们时)来更改所有CSS属性。

可以在以下位置方便地列出翻译表:此MDN页面

免费下载我的JavaScript初学者手册


更多js教程: