css基础---操作样式表

最新推荐文章于 2024-09-30 16:11:57 发布

wenmin1987

最新推荐文章于 2024-09-30 16:11:57 发布

阅读量668

点赞数

分类专栏： css 文章标签：访问样式表中样式访问显示样式读取选择符添加样式

本文链接：https://blog.csdn.net/wenmin1987/article/details/90739881

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

使用style对象可以操作行内样式，但无法访问样式表，而使用styleSheets对象可以访问<style>标签定义的内部样式表，以及<link>标签或@import命令导入的外部样式表，styleSheets对象属于document,通过document.styleSheets进行访问。

styleSheets为每个样式表定义了一个cssRules对象，用来包含指定样式表中所有的规则（样式），但IE不支持cssRules，需要使用rules对象表示样式中的规则

var cssRules=document.styleSheets[0].cssRules||document.styleSheets[0].rules;

例1：访问内联样式表

<style>
           #box{
               width:400px;
               height: 200px;
               background-color:#BFFB8F;
               border:solid 1px blue;
           }
       </style>
       <script>
           window.οnlοad=function(){
               var box=document.getElementById("box");
               var cssRules=document.styleSheets[0].cssRules||document.styleSheets[0].rules;
               box.innerHTML="<h3>盒子样式</h3>"
               box.innerHTML+="<br>边框："+cssRules[0].style.border;
               box.innerHTML+="<br>背景："+cssRules[0].style.backgroundColor;
               box.innerHTML+="<br>宽度："+cssRules[0].style.width;
               box.innerHTML+="<br>高度："+cssRules[0].style.height;
           }
       </script>
   </head>
   <body>
   <div id="box"></div>
   </body>

例2：访问样式表中的样式

访问内部样式表---

<style>
           #box{
               width:400px;
               height: 200px;
               background-color:#BFFB8F;
               border:solid 1px blue;
           }
       </style>
       <script>
           window.οnlοad=function(){
               var box=document.getElementById("box");
               var cssRules=document.styleSheets[0].cssRules||document.styleSheets[0].rules;
               box.innerHTML="<h3>盒子样式</h3>"
               box.innerHTML+="<br>边框："+cssRules[0].style.border;
               box.innerHTML+="<br>背景："+cssRules[0].style.backgroundColor;
               box.innerHTML+="<br>宽度："+cssRules[0].style.width;
               box.innerHTML+="<br>高度："+cssRules[0].style.height;
           }
       </script>

访问外部样式表---

style1.css：

body{color:black;}
p{color:gray;}
div{color:white;}

--

<style>
           #box{color:green;}
           .red{color:red;}
           .blue{color:blue;}
       </style>
       <link rel="stylesheet" type="text/css" href="css/style1.css"/>
       <script type="text/javascript">
           window.οnlοad=function(){
               var box=document.getElementById("box");
               var cssRules0=document.styleSheets[0].cssRules||document.styleSheets[0].rules;
               var cssRules=document.styleSheets[1].cssRules||document.styleSheets[1].rules;
             box.innerHTML="第二个样式表中，第一个样式的color属性值="+cssRules[0].style.color;//black
             box.innerHTML+="<br>第一个样式表中第三个样式选择符="+cssRules0[2].selectorText;//.blue读取样式的选择符
           cssRules0[2].style.color="#999";//编辑样式
           }
       </script>
   </head>
   <body>
       <div id="box"></div>
       <p class="blue">原蓝色字体，变为浅灰色</p>
   </body>

添加样式 styleSheet.addRule(selector,style,[index]) 、styleSheet.inserRule(rule,[index]);

styleSheet.addRule(selector,style,[index]);//选择符（字符串），样式声明（字符串），索引号（默认-1，表示样式表的末尾）

但Firefox不支持addRule，使用

styleSheet.inserRule(rule,[index]);//完整样式（字符串），索引号(默认为0，放置在样式表的末尾)

例

<style>
           #box{color:green;}
           .red{color:red;}
           .blue{color:blue;}
       </style>
       <script type="text/javascript">
           var styleSheets=document.styleSheets[0];
           var index=styleSheets.length;//获取样式表中包含的个数
           if(styleSheets.insertRule){
               styleSheets.insertRule("p{background-color:red;color:#fff;padding:1 em;}",index);
           }else{
               styleSheets.addRule("P","background-color:red;color:#fff;padding:1 em;",index)
           }
       </script>
   </head>
   <body>
       <p>在样式表中添加样式</p>
   </body>

访问显示样式p.currentStyle.backgroundColor 或 document.defaultView.getComputedStyle(p,null).backgroundColor

IE下：currentStyle只读对象，此对象包含了文档内所有元素的style对象的属性，以及任何未被覆盖的CSS规则的style属性

样式重叠是，可使用currentStyle对象获取当前p元素的最终显示哪些样式，这样可以找到inserRule（）或addRule（）添加样式失效的原因

非IE下：document.defaultView对象下getComputedStyle(p,null)方法：第一个参数表示元素，第二个参数表示伪类字符串，定义显示位置，一般可以省略，或者设置为null

<style>
           #box{color:green;}
           .red{color:red;}
           .blue{color:blue;background-color: #FFFFFF;}
       </style>
       <script type="text/javascript">

window.οnlοad=function(){
           var styleSheets=document.styleSheets[0];
           var index=styleSheets.length;//获取样式表中包含的个数
           if(styleSheets.insertRule){
               styleSheets.insertRule("p{background-color:red;color:#fff;padding:1 em;}",index);
           }else{
               styleSheets.addRule("P","background-color:red;color:#fff;padding:1 em;",index);
           }
           var p=document.getElementsByTagName("p")[0];
           if(document.defaultView && document.defaultView.getComputedStyle){//非IE
               p.innerHTML="背景色："+document.defaultView.getComputedStyle(p,null).backgroundColor
               +"<br>字体颜色:"+document.defaultView.getComputedStyle(p,null).color;
           }else if(p.currentStyle){//IE
               p.innerHTML="背景色："+p.currentStyle.backgroundColor+"<br>字体颜色："+p.currentStyle.color;
           }else{
               p.innerHTML="当前浏览器无法取得最终显示样式";
           }

}
       </script>