JS读写CSS样式的⽅法汇总
为了⽇后⽅便查询，本⼈翻阅了⼀些资料总结了以下⽅法，仅限原⽣JS，如有不对的地⽅欢迎指出！只求⼤家看完觉得有学到点什么就OK了！
⼀、可以通过DOM节点对象的style对象(即CSSStyleDeclaration对象)来读写⽂档元素的CSS样式
如：var elm = ElementById('test');      lor = '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';
veProperty('color');
elm.style.setProperty('color', 'green', 'important');
elm.style.cssText = ''; //快速清空该规则的所有声明
每⼀条CSS规则的样式声明部分（⼤括号内部的部分），都是⼀个CSSStyleDeclaration对象，它的属性和⽅法：
属性：
1.cssText：当前规则的所有样式声明⽂本。该属性可读写，即可⽤来设置当前规则。
2.length：当前规则包含多少条声明。
3.parentRule：包含当前规则的那条规则，同CSSRule接⼝的parentRule属性。
⽅法：
3.item(index)⽅法返回指定位置的属性名，⼀般⽤[index]语法更直接；
5.setProperty⽅法⽤于设置指定的CSS属性，没有返回值;
四、利⽤document.styleSheets属性，返回当前页⾯的所有StyleSheet对象（即所有样式表），它是⼀个只读的类数组对象，它的元素是CSSStyleSheet对象(继承⾃StyleSheet对象)，该对象的属性⽅法如下：
属性：
1.cssRules类数组对象，元素是样式表中CSS规则CSSStyleRule对象；IE9以下为rules；
2.disabled属性⽤于打开或关闭⼀张样式表，值为true或disabled；
3.ownerNode属性返回StyleSheet对象所在的DOM节点，通常是<link>或<style>。对于那些由其他样式表引⽤的样式表，该属性为null；
4.因为CSS的@import命令允许在样式表中加载其他样式表，就有了parentStyleSheet属性，它返回包括了当前样式表的那张样式表。如果当前样式表是顶层样式表，则该属性返回null；
6.title属性返回StyleSheet对象的title值；
7.href属性是只读属性，返回StyleSheet对象连接的样式表地址。对于内嵌的style节点，该属性等于null；
⽅法：deleteRule()从样式表中删除⼀条规则，insertRule()向样式表中插⼊⼀条新规则，IE9以下为addRule()、removeRule()；
如：
document.styleSheets[0].insertRule('#test:hover{color: white;}',0);
document.styleSheets[0].deleteRule(0); //删除样式表中的第⼀条规则
document.styleSheets[0].cssRules[1].selectorText; //返回选择器字符串
document.styleSheets[0].cssRules[1].cssText; //返回规则字符串，含选择器
document.styleSheets[0].cssRules[1].style.border;
document.styleSheets[0].cssRules[1].style.cssText; //返回当前规则的所有样式声明字符串
五、⽤window对象的getComputedStyle⽅法，第⼀个参数是Element对象，第⼆个参数可以是null、空字符串、伪元素字符串，该⽅法返回⼀个只读的表⽰计算样式的CSSStyleDeclaration对象，它代表了实际应⽤在指定元素上的最终样式信息，即各种CSS规则叠加后的结果；
如：var color = ComputedStyle(elm, ':before').color;        var color = ComputedStyle(elm,
原生js和js的区别':before').getPropertyValue('color');      或：var color = ComputedStyle(elm, null).color;
表⽰计算样式的CSSStyleDeclaration对象与表⽰内联样式的CSSStyleDeclaration对象的区别：
1.计算样式的属性是只读的；
2.计算样式的值是绝对值，类似百分⽐和点之类相对的单位将全部转换为以'px'为后缀的字符串绝对值，其值是颜⾊的属性将以“rgb（#，#，#）”或“rgba（#，#，#，#）”的格式返回;
3.不计算复合属性，只基于最基础的属性，如不要查询margin，⽽单独查询marginTop等;
4.计算样式对象未定义cssText属性；
5.计算样式同时具有欺骗性，使⽤时需注意，在查询某些属性时的返回值不⼀定精准，如查询font-family；
6.IE9以下不⽀持getComputedStyle⽅法，IE的Element对象有currentStyle属性；
六、直接添加样式表
1.创建标签<style>添加⼀张内置样式表
var style1 = ateElement('style');
style1.innerHTML = 'body{color:red}#top:hover{background-color: red;color: white;}';
document.head.appendChild(style1);
2.另⼀种是添加外部样式表，即在⽂档中添加⼀个link节点，然后将href属性指向外部样式表的URL
var link1 = ateElement('link');
link1.setAttribute('rel', 'stylesheet');
link1.setAttribute('type', 'text/css');
link1.setAttribute('href', 'reset-min.css');
document.head.appendChild(link1);
七、window.matchMedia⽅法⽤来检查CSS的mediaQuery语句。各种浏览器的最新版本（包括IE 10+）都⽀持该⽅法，对于不⽀持该⽅法的⽼式浏览器，可以使⽤第三⽅函数库matchMedia.js；
下⾯是mediaQuery语句的⼀个例⼦：
@media all and (max-device-width: 700px) {
body {background: #FF0;}
}
window.matchMedia⽅法接受⼀个mediaQuery语句的字符串作为参数，返回⼀个MediaQueryList对象。该对象有以下两个属性：
media：返回所查询的mediaQuery语句字符串。
matches：返回⼀个布尔值，表⽰当前环境是否匹配查询语句。
var result = window.matchMedia('(max-width: 700px)');
if (result.matches) {
console.log('页⾯宽度⼩于等于700px');
} else {
console.log('页⾯宽度⼤于700px');
}
window.matchMedia⽅法返回的MediaQueryList对象有两个⽅法，⽤来监听事件：addListener⽅法和removeListener⽅法。如果mediaQuery查询结果发⽣变化，就调⽤指定的回调函数；
var mql = window.matchMedia("(max-width: 700px)");
mql.addListener(mqCallback);// 指定回调函数
function mqCallback(mql) {
if (mql.matches) {// 宽度⼩于等于700像素}
else { // 宽度⼤于700像素}
}
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。