在前端开发中，我们经常需要根据不同的条件或用户操作来动态地更改网页上的元素样式。这时候，JavaScript就成为了一个非常有用的工具。
获取元素对象
在更改元素样式之前，我们首先需要获取到对应的元素对象。常见的方式是使用document.getElementById()方法，该方法接收一个字符串参数，即元素的ID，返回对应的元素对象。
const myElement = document.getElementById("my-id");除此之外，还可以使用其他方式获取元素对象，比如getElementsByTagName()、getElementsByClassName()、querySelector()等方法，具体使用方法可以参考相关文档。
修改样式属性
获取到元素对象后，我们就可以通过修改其样式属性来改变其外观。样式属性以字符串形式传递给元素对象的style属性，并赋予新的值即可。
下面是一些示例代码：
修改背景颜色
// 获取元素对象
const myElement = document.getElementById("my-id");
// 修改背景颜色
myElement.style.backgroundColor = "red";修改字体大小
// 获取元素对象
const myElement = document.getElementById("my-id");
// 修改字体大小
myElement.style.fontSize = "24px";隐藏元素
// 获取元素对象
const myElement = document.getElementById("my-id");
// 隐藏元素
myElement.style.display = "none";注意事项
在使用JavaScript动态地更改元素样式属性时，有一些需要注意的事项：
- 样式属性名需要以驼峰命名法表示，比如
background-color应该写成backgroundColor。 - 样式属性值需要以字符串形式传递，比如
24px应该写成"24px"。 - 尽量避免直接修改元素对象的
style属性，而是应该将样式定义在CSS文件中，然后通过修改元素对象的class属性来应用样式。
总结
通过JavaScript动态地更改元素样式属性，可以实现网页上元素的动态效果，更加丰富和生动。但是，使用时需要注意样式属性名的命名规范、样式属性值的数据类型，以及尽量避免直接修改元素对象的style属性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11916