标签：返回 style 对象 读写 JS 样式表 document CSS 属性

  一、可以通过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对象，它的属性和方法：             属性：                 1.cssText：当前规则的所有样式声明文本。该属性可读写，即可用来设置当前规则。                 2.length：当前规则包含多少条声明。                 3.parentRule：包含当前规则的那条规则，同CSSRule接口的parentRule属性。             方法：                 1.getPropertyPriority()方法返回指定声明的优先级，如果有的话，就是“important”，否则就是空字符串；                 2.getPropertyValue方法返回指定声明的值；                 3.item(index)方法返回指定位置的属性名，一般用[index]语法更直接；                 4.removeProperty方法用于删除一条CSS属性，返回被删除的值；                 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；                 5.type属性返回StyleSheet对象的type值，通常是text/css；                 6.title属性返回StyleSheet对象的title值；                 7.href属性是只读属性，返回StyleSheet对象连接的样式表地址。对于内嵌的style节点，该属性等于null；                 8.media属性表示这个样式表是用于屏幕（screen），还是用于打印（print），或两者都适用（all），该属性只读，默认值是screen；         方法：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; //返回当前规则的所有样式声明字符串

标签：返回,style,对象,读写,JS,样式表,document,CSS,属性
来源： https://www.cnblogs.com/LH-721109/p/15849439.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。