js怎么修改css属性-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

js修改css属性的方法：1、修改style样式，语法“样式表的指定内容.style.属性="值"”；2、修改特定元素节点的style内容，语法“元素对象.style.cssText="样式值"”；3、使用setAttribute()函数。

本教程操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。

原生JS修改CSS属性有以下三种方法

修改style样式
通过document.styleSheets[n] // n表示期望修改的样式表序号，从0开始计数来获取到期望修改的样式表，通过cssRules[0]获取到该样式表的css内容，通过style修改特定样式。（此方法比较麻烦，需要清楚指定样式在样式表的顺序）
修改特定元素节点的style内容
cssText可以一次性修改多个css属性
style.attrName 修改单个属性 attrName的值
通过setAttribute 修改style属性值

HTML代码

<div class="test" style="height: 100px;">TEST</div>
<button class="cssText">cssText</button>
<button class="setAttribute">setAttribute</button>
<button class="stylesheet ">stylesheet </button>

CSS代码

.test {
   font-size: 30px;
   color: blue;
   background-color: blueviolet
}

相关阅读 >>

css实现页面底部固定的方法介绍（附代码）

手机端怎样用rem+scss做适配

css能换图片颜色吗

css如何让块无间隙

两分钟带你了解在css中三种使图片居中的方法

nginx 怎么实现js css 不缓存

css中的position是什么意思

更多相关阅读请进入《js》频道 >>

书籍

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » js怎么修改css属性

js怎么修改css属性

原生JS修改CSS属性有以下三种方法

HTML代码

CSS代码

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

相关推荐

评论