可以通过 JavaScript 控制页面元素样式,具体实现方式如下:
首先需要选择页面中需要控制样式的元素。
// 通过ID选择元素
var element = document.getElementById("element-id");
// 通过class选择元素
var elements = document.getElementsByClassName("element-class");
// 通过标签名选择元素
var elements = document.getElementsByTagName("div");
通过选择元素后,可以使用 JavaScript 修改元素的样式。
// 修改元素的样式
element.style.backgroundColor = "red";
element.style.width = "100px";
// 修改多个元素的样式
for(var i = 0; i < elements.length; i++){
elements[i].style.color = "blue";
}
通过添加或移除元素的类名,可以间接地修改元素的样式。
// 添加类名
element.classList.add("new-class");
// 移除类名
element.classList.remove("old-class");
以上就是通过 JavaScript 控制页面元素样式的基本方法。