当前位置：首页 > news >正文

javascript获取样式表的规则及读取与写入

news 2025/7/10 11:18:22

CSSStyleSheet是继承了StyleSheet的接口属性,它是用于找当前文档中的<link rel=“” href=“”…>这样文件的，有以下属性：lenght,cssRules,title,href,type,deleteRule,insertRule等

CSSStyleRule是继承于CSSRule，它是用于找<link rel=“” href="'>中所有每个规则的集合，它有以下属性：
cssText,selectorText,type,style,等。

第1种方法

 function getStyle(element){//这里是兼容IE的styleSheet属性，sheet是dom中CSSStyleSheet对象的属性return element.sheet||element.styleSheet;}//获取到文档中的第1个linkvar link=document.getElementsByTagName("link")[0];var sheet=getStyle(link);//获取link文件的规则合集对象cssRules,以及兼容IE的rulesvar rules=sheet.cssRules||sheet.rules;//获取.css文件中第一条规则，以花括号为准的第1个{}var rule=rules[0];//这里是写入cssText,而直接rule.cssText是直接读取整个样式表，但不能写入，要写入必须rule.style.cssText="你写入的规则"rule.style.cssText="margin:5px;padding:5px;";//这里是显示你读取第1条规则的选择符文本如：.db 或#main或标签选择符div等console.log(rule.selectorText);console.log(rule.style.cssText);

第2种方法

//获取到文档中的第1个link,这里直接用document.styleSheets[0]来找文档中的<link>文件，找到后直接获取文件中的规则集合var sheet=document.styleSheets[0];//获取link文件的规则合集对象cssRules,以及兼容IE的rulesvar rules=sheet.cssRules||sheet.rules;//获取.css文件中第一条规则，以花括号为准的第1个{}var rule=rules[0];//这里是写入cssText,而直接rule.cssText是直接读取整个样式表，但不能写入，要写入必须rule.style.cssText="你写入的规则"rule.style.cssText="margin:5px;padding:5px;";//这里是显示你读取第1条规则的选择符文本如：.db 或#main或标签选择符div等console.log(rule.selectorText);console.log(rule.style.cssText);

然后是你在文件中的导入的外部规则，也包括你在当前文档中嵌入的规则，嵌入的规则没有的href，rel,href=undefine属于未定义状态
这是外部导入css文件

body,html
{margin: 0;padding: 0;
}
body{font-family: Arial, Helvetica, sans-serif;font-size: 1em;
}#mydiv
{margin: 0 auto;width: 800px;margin-top: 5px;border: solid 1px blue;
}
#mydiv #mylist
{margin: 0;padding: 0;
}
#mydiv #mylist li
{list-style: none;margin: 5px;font-size: 0.85em;float:left;
}