教你js对象删除某个元素 js获取类名的3种方法( 八 )

selectorText：只读，返回当前规则的选择器；style：只读，返回一个CSSStyleDeclaration对象，可以通过它设置和取得规则中特定的样式值；styleMap：一个StylePropertyMap对象；console.log(rule.cssText);// 定义规则的字符串console.log(rule.parentRule);console.log(rule.parentStyleSheet); // CSSStyleSheetconsole.log(rule.selectorText);// 选择器console.log(rule.style);// CSSStyleDeclarationconsole.log(rule.styleMap);// StylePropertyMapconsole.log(rule.type);// 1最常用的是cssText、selectorText和style这三个属性；cssText属性与style.cssText属性类似，但并不相同，前者包含选择器和围绕样式信息的花括号，后者只包含样式信息；cssText是只读的，style.cssText是可写的；
console.log(rule.cssText);// .container{color:white}console.log(rule.style.cssText); // color:whiterule.style.cssText = "background-color:purple";console.log(rule.cssText);// .container{background-color:purple;}console.log(rule.style.cssText); // background-color:purplerule.style.cssText += "color:white;";大多数情况下，仅使用style属性就可以满足所有操作样式规则的需求了；这个对象就像每个元素上的style属性一样，可以通过它读取和修改规则中的样式信息；
console.log(rule.style.width);console.log(rule.style.height);rule.style.backgroundColor = "lightgray";console.log(rule.style.cssText);CSSStyleRule对象的style属性，使用方式和内联style对象的使用方式是一致的，但要注意，一个是规则对象的style属性对象，一个是内联style对象；
// 遍历样式表的规则var ss = document.styleSheets[0];// 第一个样式表var rules = ss.cssRules ? ss.cssRules : ss.rules;// 样式表规则for(var i=0; i<rules.length; i++){var rule = rules[i];if(!rule.selectorText) continue;// 跳过@import和非样式规则var selector = rule.selectorText;// 选择器var ruleText = rule.style.cssText; // 文本形式的样式// 如果规则应用在h1元素上，也将其应用到h2元素上// 注意，仅当选择器在字面上为h1时这才起作用if(selector == "h1"){if(ss.insertRule)ss.insertRule("h2 {" + ruleText + "}", rules.length);else if(ss.addRule)ss.addRule("h2", ruleText, rules.length);}// 如果规则设置了text-decoration属性，则将其删除if(rule.style.textDecoration){if(ss.deleteRule)ss.deleteRule(i);else if(ss.removeRule)ss.removeRule(i);i--; // 调整循环索引，因为以上的规则i+1现在即为规则i}}创建新样式表：
可以创建一个新样式表并将其添加到文档中；使用DOM技术，创建一个<style>元素，并将其插入到文档的头部，然后再用其innerHTML属性来设置样式表内容；在低版本的IE中，CSSStyleSheet对象通过非标准方法document.createStyleSheet()来创建，其样式文本用cssText属性值为指定；
// 创建一个新样式表// 对文档添加一个样式表，用指定的样式填充它// style参数可能是字符串或对象，如果它是字符串，就把它作为样式表的文本// 如果它是对象，将每个定义样式规则的每个属性添加到样式表中// 属性名即为选择器，其值即为对应的样式function addStyles(styles){var styleElt, styleeSheet;// 先创建一个新样式表if(document.createStyleSheet)// 如果是IEstyleSheet = document.createStyleSheet();else{var head = document.getElementsByTagName("head")[0];styleElt = document.createElement("style"); // 新的<style>元素head.appendChild(styleElt);// 这个新样式表应该是最后一个styleSheet = document.styleSheets[document.styleSheets.length - 1];}// 向其中插入样式if(typeof styles === "string"){if(styleElt)styleElt.innerHTML = styles;elsestyleSheet.cssText = styles;// IE}else{// 参数是规则对象var i = 0;for(selector in styles){if(styleSheet.insertRule){var rule = selector + "{" + styles[selector] + "}";styleSheet.insertRule(rule, i++);}else{styleSheet.addRule(selector, styles[selector], i++);}}}}// 应用var styles = "h2 {font-size: 2em; color: red;}";addStyles(styles);var rule = document.styleSheets[1].cssRules[0];addStyles(rule);CSS动画：脚本化CSS的最常见的用途之一就是产生视觉动画效果；其原理是使用setTimeout()或setInterval()重复调用函数来修改元素的内联样式，以达到产生视觉差的动画效果；

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：