js dom操作设置样式

原创

停留的一抹光 2024-06-19 09:40:11 ©著作权

©著作权归作者所有：来自51CTO博客作者停留的一抹光的原创作品，请联系作者获取转载授权，否则将追究法律责任

js dom操作设置样式_优先级

在JavaScript中操作DOM样式是实现动态页面效果和交互的关键。你可以直接修改元素的内联样式，也可以通过改变类名来应用CSS类样式。

一、直接操作

通过元素的style属性，你可以直接读取或设置内联样式属性。注意，这种方式会覆盖外部CSS样式。

// 获取并修改样式
let element = document.getElementById("myElement");
element.style.color = "red"; // 改变颜色
element.style.fontSize = "20px"; // 改变字体大小

// 读取样式
let color = element.style.color;
let fontSize = element.style.fontSize;
console.log(color, fontSize);

二、通过类名改变样式

另一种更推荐的方式是通过添加、移除CSS类名来改变元素样式，这样可以更好地利用CSS的层叠加重载机制和缓存。

//css样式
<style>
.active {
    color: red;
    font-size: 20px;
}
</style>


//html
<div id="myElement"></div>

//js
let element = document.getElementById("myElement");

// 添加类名
element.classList.add("active");

// 移除类名
element.classList.remove("active");

// 切换类名（如果存在则移除，否则添加）
element.classList.toggle("active");

// 检查是否有某类名
let isActive = element.classList.contains("active");

三、使用`getComputedStyle`读取计算后的样式

有时，你需要获取经过CSS计算后的样式值，而不是直接的内联样式，这时可以使用window.getComputedStyle。

let element = document.getElementById("myElement");
let computedStyle = window.getComputedStyle(element);

let color = computedStyle.color;
let fontSize = computedStyle.fontSize;
console.log(color, fontSize);