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

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

CSSStyleRule是继承于CSSRule,它是用于找<link rel="" href="'>中所有每个规则的集合,它有以下属性:

cssText,selectorText,type,style,等。

第1种方法

javascript 复制代码
 function getStyle(element)
           {
           //这里是兼容IE的styleSheet属性,sheet是dom中CSSStyleSheet对象的属性
              return element.sheet||element.styleSheet;
           }
           //获取到文档中的第1个link
           var link=document.getElementsByTagName("link")[0];
           var sheet=getStyle(link);
           //获取link文件的规则合集对象cssRules,以及兼容IE的rules
           var 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种方法

javascript 复制代码
           //获取到文档中的第1个link,这里直接用document.styleSheets[0]来找文档中的<link>文件,找到后直接获取文件中的规则集合
           var sheet=document.styleSheets[0];
           //获取link文件的规则合集对象cssRules,以及兼容IE的rules
           var 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文件

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;
}
相关推荐
虾球xz9 分钟前
CppCon 2018 学习:THE MOST VALUABLE VALUES
开发语言·c++·学习
天天鸭27 分钟前
写个vite插件自动处理系统权限,降低99%重复工作
前端·javascript·vite
江城开朗的豌豆1 小时前
Vue-router方法大全:让页面跳转随心所欲!
前端·javascript·vue.js
阿蒙Amon1 小时前
C#扩展方法全解析:给现有类型插上翅膀的魔法
开发语言·c#
江城开朗的豌豆1 小时前
Vue路由动态生成秘籍:让你的链接'活'起来!
前端·javascript·vue.js
晓得迷路了1 小时前
栗子前端技术周刊第 88 期 - Apache ECharts 6.0 beta、Deno 2.4、Astro 5.11...
前端·javascript·echarts
江城开朗的豌豆1 小时前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js