|
阅读：5228回复：1
原生js更改css样式的两种方式；用原生JS读写CSS样式的方法总结
下面我给大家介绍的是原生js更改CSS样式的两种方式：
首先注意 JS中获取元素可使用getElementByID()、getElementsByName()、getElementsByTagName() 1. 通过在javascript代码中的 node.style.cssText="css表达式1；css表达式2；css表达式3 " 的方式直接更改CSS样式。 2. 先在CSS样式表中对特定的类如“active类”设置样式（这里的active类是假定的，暂时不存在），然后再在javascript代码中通过node.classname="active"使得CSS样式表中对active类的样式设置附加到该node节点上来。 下面是详细介绍，首先是html的代码： <style type="text/css"> div { float: left; padding: 20px; margin: 10px; border: 1px solid #000; background-color: #fff; color: #000; } .active { background-color:blue } </style> <body> <div class="root"> </div> </body> 首先使用上面所说的第一种方式更改css样式，写入如下的javascript代码: <script type="text/javascript"> var root=document.getElementsByClassName("root")[0]; root.style.cssText="background-color: blue;color: #fff;"; </script> 总结：这两种方式结果相同，但就操作过程而言，第二种方式也就是“node.classname”的方式使得css和js的写入分隔开来，显然更加合理有序一些。如果css语句比较简单的话，这两种方式没有差别，但若css语句比较复杂的话，显然第二种方式比较有条不紊。 以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！ |
|
|
沙发#
发布于：2020-06-02 09:09
一、可以通过DOM节点对象的style对象(即CSSStyleDeclaration对象)来读写文档元素的CSS样式
如：var elm = document.getElementById('test'); elm.style.color = 'black'; 二、通过Element对象的getAttribute()、setAttribute()、removeAttribute()直接读写style属性 如：elm.setAttribute('style','color:red;line-height:30px'); 三、通过CSSStyleDeclaration对象的cssText属性和setProperty()、removeProperty等方法 如：elm.style.cssText ='color:red;line-height:30px'; elm.style.removeProperty('color'); elm.style.setProperty('color', 'green', 'important'); elm.style.cssText = ''; //快速清空该规则的所有声明 每一条CSS规则的样式声明部分（大括号内部的部分），都是一个CSSStyleDeclaration对象，它的属性和方法： |
|
