bob体育官方平台
DOM Style样式对象的详细用法

文件名StyleSheet.js复制代码 代码如下:// CssRule类由StyleSheet.getRule方法重临,不直接创立 function CssRule { this.rule = rule; this.style = rule.style; this.selectorText = rule.selectorText; this.index = null; } function StyleSheet(State of Qatar { var head = document.getElementsByTagName[0]; //通过新建标签来成立新样式 /* 在那不用document.createStyleSheet来完结,是因为在FF下 借使未导入任何CSS文件的情形下document.createStyleSheet方法失败 */ var style = document.createElement; style.type = "text/css"; head.appendChild; this.CatchStyle(document.styleSheets.length - 1State of Qatar; } StyleSheet.prototype = { //可直接破获现成Style CatchStyle: function { this.style = document.styleSheets[index]; if (navigator.userAgent.indexOf { //非IE浏览器补丁 this.style.addRule = function { var index = this.cssRules.length; this.insertRule(selector + "{" + style + "}", index卡塔尔; }; this.style.removeRule = function { this.deleteRule; }; } }, //新扩展样式 AddRule: function { this.style.addRule; }, //删除样式 RemoveRule: function { this.style.removeRule; }, //得到全数样式 getRules: function(卡塔尔国 { if { //IE return this.style.rules; } return this.style.cssRules; //非IE }, //通过选用器,拿到样式 getRule: function { var rules = this.getRules(卡塔尔; for (var i = 0; i < rules.length; i++卡塔尔国 { var r = rules[i]; if (r.selectorText == selector卡塔尔(قطر‎ { var rule = new CssRule; rule.index = i; return rule; } } return null; } }; 调用示例代码 复制代码 代码如下:

DOM Style样式对象的详实用法

HTML Style样式相比复杂,相应访谈、更正章程也不无异。参谋相关资料,收拾如下。

出类拔萃Html文件如下,有三种概念形式。

<head>
    <style type="text/css">
               /* 内部样式 */
      h3 {color:green;}
    </style>
            <!-- 外部样式 style.css -->
    <link rel="stylesheet" type="text/css" href="style.css"/>
           <!-- 在外部的styles.css文件中,代码如下:
               h3 {color:blue;} -->
</head>
<body>
    <h3 style ="color:Black;" >测试!</h3>
</body>

样式 值

概念1:行内样式, (内联样式)Inline style

  任何HTML成分标签都会有多个通用的性质style。它会回来CSSStyleDeclaration对象。

体制订义在HTML成分的科班属性style里

a 将分店『;』隔绝的叁个可能四天个性:值(其全部为要素的style属性的值卡塔尔国

b 属性和属性值之间用 『:』连接 
下边大家看多少个最广大的行内style样式的拜候方式。Style在要白藏点内,style可读可写;

<div id='St1' style="font-family:Arial,Helvetica;width:100px; height:100px; color:red;">芒果</div> 

var oV1 = document.getElementById('St1')

a)获取:x = oV1.Style.width

        x = oV1.Style.getPropertyValue('height')

b)设置:oV1.style.backgroundColor = 'red';

     oV1.Style.setProperty('height', '200px')

c)移出(2种):oV1.style.font-family="";
         oV1.style.removeProperty("background-color")

d卡塔尔(قطر‎全体内联样式 CSS 属性

style样式是个 CSSStyleDeclaration 对象,它不但提供了单个 CSS 属性的访谈方式,如cssText属性 ,也提供 setProperty(State of Qatar、getPropertyValue(State of Qatar及removeProperty(卡塔尔 方法

  oV1.Style.cssText = " height:200px; width: 200px"

  oV1.Style.cssText = '';

  oV1.setAttribute('style', ' height:100px; width:100px');

  oV1.getAttribute('style');

  oV1.removeAttribute('style');

  仅能操作style属性中定义的内联样式,不可能得到或设置样式表中的体裁  

a

概念2:内部样式表(style元素) Internal style sheet

其选用 <style> 标识将样式定义为当中块对象,内部样式只对所在的网页有效。

示范代码如下: 嵌入 CSS 能够使得压缩 HTTP 诉求,提高页面质量
<head>

<style type="text/css">
     <!--

      //div(选用器)  {width: 100px;(样式表明) }
       div,h3 { width: 100px; }                   //四个标签采纳符

     #Id1   { width: 100px; height: 100px; }       //一个id选择符
       .c3    { color:blue;}                                                //class选择符
       p.cla4 { color:#fff; background:#070;}                            /* 三个因素、三个class选取符

     -->

</style>

<style type="text/css">  @import url(sty2.css); </style>            //导入式

<link rel="stylesheet" type="text/css"  href="wider.css">            //外界链接式(rel,type不要动卡塔尔(قطر‎
</head>
      //wider.css中的定义   #box { width: 200px; }

function getStyle(oDiv, attr){
    if (oDiv.currentStyle)  {return oDiv.currentStyle[attr];              //针对IE浏览器 }
    else                    {return getComputedStyle(oDiv, false)[attr]; }  //Firefox浏览器 
    } 
<div id="id1"  class="c3" >test style</div> 
var oT1 = document.getElementById('id1'); 
var a = getStyle(oT1, 'width');

  使用style属性能够安装行内的CSS样式,而通过id和class调用时最常用的办法。

  CSSStyleSheet类型表示通过<link>成分(HTMLLinkElement对象State of Qatar和<style>成分(HTMLStyleElement对象卡塔尔满含的样式表。
体制表中一个大括号正是三个cssRule对象
var sheet=link.sheet||link.styleSheet;    //(非IE)使用sheet属性,(IE)使用styleSheet获得这一个类型
var sheet=document.styleSheets[i];        //styleSheets: 拿到当前网页的保有样式表对象

 

b

概念3:外部样式表(引用四个CSS样式表文件)Rules或rules

c

(1卡塔尔  DOM(document对象State of Qatar对象模型中有多少个至关心器重要的集结 

doc1.images         [HTMLCollection] 全体图像
doc1.anchors        [HTMLCollection] 全部锚点
doc1.styleSheets  [StyleSheetList] 全体样式
doc1.links          [HTMLCollection] 全体链接

其中styleSheets包蕴全体的体裁集结

d

(2) 样式表集结styleSheets -> 法规(选用器及样式)(css卡塔尔rules ->某同样式.属性 style.attr

叁个style成分标签(多个样式表State of Qatar  var sheet=document.styleSheets[0]

法则集合(选取器及样式集结)   vsr Rules =sheet.cssRules||sheet[0].rules;   //W3C用cssRules //微软rules

先是个准则(选取器及样式)     var rule=doc1.styleSheets[0].rules[0]   //rules[0](IE),CSSRules[0](非IE)

                                              var rule=sheet.cssRules[0]|| sheet.rules[0];

style标签或单个Style的全体内容  head.style.cssTextoV1.style.cssText 或 rules[0].style.cssText      

style标签中贰个大括号便是叁个(css)Rule对象,cssRules(非IE)|rules(IE)可回到某后生可畏体制表中全体选用器的汇集列表,能够透过CSSRules[0](非IE)和rules[0]属性(IE)来举办拜望。第一条法规便是(css卡塔尔Rules[0],第二条就是(css卡塔尔Rules[1]等等。

一条准绳正是二个要素的扬言 p {} 或许八个元素的风华正茂组注明 div,h3,p{color:blue;width: 100px;} (IE还将其分成3条)。能够对各样样式实行具体的操作(可读可写)。

     
    通过 className 纠正样式 ,  获取或更改有个别属性的值(兼容性难题State of Qatar 
doc1.styleSheets[0].(css)rules[index].style.attr     //IE,W3C为(css卡塔尔(قطر‎,查找体制表中的样式属性(ie chrom卡塔尔   

e

(3) style样式,规则(css)rules在各浏览器中区别

例:下列样式表在分歧浏览器的表明

@import url("test.css"); 
  p,h2,h3 {padding-right: 10px; } 
  pre.test + * {margin-right: 20%;  } 
  pre.test { }
 
Safari看见的是【4条】规则: 注意大写 
cssRules[0]、undefined 
cssRules[1]、P 
cssRules[2]、PRE.test[CLASSS~="test"]+* 
cssRules[3]、PRE.test[CLASSS~="test"]

Safari则只取p。我才知道这是一种不正确的写法

IE7看见了【5条】: 注意大写 
rules[0]、P 
rules[1]、H2 
rules[2]、H3 
rules[3]、PRE.test + * 
rules[4]、PRE.test 
   IE认为p,h2,h3是三条而不是一条规则,
Mozilla和Opera 9看见4条: 注意小写 
cssRules[0]、undefined 
cssRules[1]、p,h2,h3 
cssRules[2]、pre.test + * 
cssRules[3]、pre.test
Mac IE也看见5条: 注意大写
0、P 
1、H2 
2、H3 
3、PRE.test * (注意没有+号) 
4、PRE.test

Mac IE把选择器改成了pre.test *,
这样含义就非常不一样了。非常严重的问题。

故而要拜会pre.test在Safari和Mozilla里须要cssRules[3],而IE是rules[4],早期的Mozilla是cssRules[5]。

尚无根本字 ,所以只要使用索引值的话难点就特别沉痛。

作者们旨在能如此访问: document.styleSheets[1].cssRules['PRE.test'],这样笔者就能够访谈pre的体裁表准则了。不过W3C也许别的浏览器貌似无需如此的拜访样式表的措施。可是具备的文书档案在此个主题材料上都保持沉默。

本条战败意味着你大致没有办法访问法则了。

只要大家早已访谈了一条准绳。将来必要改换此中一条申明。

(1卡塔尔国表明式如下:  rule.style.color = '#0000cc';

(2State of QatarW3C的办法是: rule.style.setProperty('color','#00cc00',null卡塔尔国;因为style.color轻巧的多,所以作者不想用那几个。

事例:希图改革pre的颜料,代码如下:

为了保障能用,小编把pre的平整写在终极一条。比非常丑,不过那是唯生龙活虎的诀要: 
function changeIt() { 
  if (!document.styleSheets) return; 
  var theRules = new Array(); 
  if (document.styleSheets[1].cssRules)     theRules = document.styleSheets[1].cssRules 
  else if (document.styleSheets[1].rules)   theRules = document.styleSheets[1].rules 
  else return; 
  theRules[theRules.length-1].style.backgroundColor = '#EEF0F5'; 
  }

(4) style体制的丰富或删除

doc1.styleSheets[0].insertRule(“selector{attr:value}”, index);     //非IE

doc1.styleSheets[0].deleteRule(index);                               //非IE

 

doc1.styleSheets[0].addRule(“selector”,”attr:value”, index);      //IE

doc1.styleSheets[0].removeRule(index);                               //IE 

上一篇:没有了 下一篇:求大神帮忙解答
返回顶部