javascript之dom访问css

冰暮流星2026-04-12 9:15

dom访问css有三种方式

第一种

语法格式是DOM对象.style.属性值

这个方法要注意，如果属性值中间有横线连接，比如font-size,要去掉中间的短横线，短横线后面的字母要大写，font-size变为fontSize

案例

html基础代码：

html 复制代码

 <div id="mydiv" class="d1">hello world</div>

如果说想要通过DOM操作，把hello world颜色变为红色

javascript 复制代码

let e=document.getElementById("mydiv")
//设置样式
e.style.color='red'

这种方法调整个别css属性还可以，如果要一次性调整多个css属性就很麻烦了

第二种是使用classname属性

语法是DOM对象.classname

还拿上面div做例子

假如要给上面的div添加下面的css属性

css 复制代码

        .hello {
            width:500px;
            height:500px;
            color:yellow;
            background-color: green;
        }

代码是

javascript 复制代码

let e = document.getElementById("mydiv")
e.className="hello"

第三种方法是使用classlist属性

通过增加add(），remove（）方法添加或者删除属性

比如说还是要添加上面的类名是hello的css属性

javascript 复制代码

 let e = document.getElementById("mydiv")
//添加类
e.classList.add("hello")
//删除类
 e.classList.remove("hello")