javascript DOM 设置样式

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

文章目录


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

一、直接操作内联样式

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

示例代码

javascript 复制代码
// 获取并修改样式
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部分:

html 复制代码
<style>
.active {
    color: red;
    font-size: 20px;
}
</style>

JavaScript部分:

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

示例代码

javascript 复制代码
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类管理样式,可以使样式和逻辑分离,提高代码的可维护性。

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

相关推荐
小曲曲43 分钟前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•2 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS3 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜4 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点4 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow4 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o4 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
刚刚好ā5 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
yqcoder7 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
会发光的猪。7 小时前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js