No.	内容链接
1	Openlayers 【入门教程】 - 【源代码+示例300+】
2	Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3	Cesium 【入门教程】 - 【源代码+图文示例200+】
4	MapboxGL【入门教程】 - 【源代码+图文示例150+】
5	前端就业宝典 【面试题+详细答案 1000+】

文章目录

一、直接操作内联样式二、通过类名改变样式三、使用`getComputedStyle`读取计算后的样式四、注意事项

---

在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的层叠加重载机制和缓存。

示例代码

HTML部分：

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

JavaScript部分：

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);

四、注意事项

性能：频繁修改内联样式可能影响性能，尽量使用CSS类名来改变样式。优先级：直接修改style属性的样式优先级最高，会覆盖外部CSS和内嵌入式样式。兼容性：classList方法在IE10+被支持，对于旧浏览器，需要考虑使用className并手动管理类的添加和移除。代码可维护性：使用CSS类管理样式，可以使样式和逻辑分离，提高代码的可维护性。

通过上述方法，你可以灵活地控制和管理页面元素的样式，实现丰富的动态效果。