JavaScript CSS修改学习第三章 修改样式表_基础知识_脚本之家

2019-11-26 16:07栏目:竞技宝竞猜
TAG:

请注意代码和传统的DHTML的区别。在DHTML你通过直接修改页面上的特定元素来改变样式,而这里的代码修改的是样式表。在这里查看W3C DOM-CSS的兼容性列表。定义 一个页面总是包含一个或者几个样式表,一个样式表里面包含一条或者几条规则,一条规则里有详细的样式声明。这个页面的样式表如下: 复制代码 代码如下:

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>

我们的目的是修改pre.test的白色背景为#EEF0F5。 样式表 所有外链或者内嵌的样式表都能通过document.styleSheets数组访问。quirksmode.css,这个网站的通用样式表保存在document.styleSheets[0]龙电竞官网,里。上面这段特别的样式表段就保存在document.styleSheets[1]。我们就在这段代码上进行测试。 cssRules[]和rules[] 一条规则就是一个或者多个元素的一组声明。这里有两种访问规则的方法。W3C坚持使用cssRules[],而微软坚持rules[]。两种方法都是用索引数字,第一条规则就是Rules[0],第二条就是Rules[1]等等。 复制代码 代码如下: 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 现在theRules就包含了所有的样式规则。规则的数目 这是样式表: 复制代码 代码如下: @import url; p,h2,h3 { padding-right: 10px; } pre.test + * { margin-right: 20%; } pre.test { background-color: #ffffff; } 在你看来可能是4条规则:@import 然后是p,h2,h3,接着pre.test + *,最后是pre.test。然而浏览器可不这么看。 Safari看见的是4条规则: 0、undefined 1、P 2、PRE.test[CLASSS~="test"]+* 3、PRE.test[CLASSS~="test"] 注意大写 IE7beta3看见了5条: 0、P 1、H2 2、H3 3、PRE.test + * 4、PRE.test 注意大写 Mac IE也看见5条: 0、P 1、H2 2、H3 3、PRE.test * 4、PRE.test 注意大写 Mozilla和Opera 9看见4条: 0、undefined 1、p,h2,h3 2、pre.test + * 3、pre.test 注意小写 非常棒的混乱! 1、IE认为p,h2,h3是三条而不是一条规则,而Safari则只取p。知道现在我才知道这是一种不正确的写法。 2、Mac IE把选择器改成了pre.test *,这样含义就非常不一样了。非常严重的问题。 3、除了Safari给pre.test添加了不必要的表达式以外,这个是支持最好的了。 所以要访问pre.test在Safari和Mozilla里需要cssRules[3],而IE是rules[4],早期的Mozilla是cssRules[5]。很可爱,不是么? 没有关键字 所以如果使用索引值的话问题就非常严重。我们希望能这样访问: document.styleSheets[1].cssRules['PRE.test']这样我就能访问pre的样式表规则了。但是W3C或者其他浏览器貌似不需要这样的访问样式表的方法。但是所有的文档在这个问题上都保持沉默。 这个失败意味着你基本上没法访问规则了。 样式声明 假设我们已经访问了一条规则。现在需要改变其中一条声明。表达式如下: 复制代码 代码如下: rule.style.color = '#0000cc'; W3C的方法是: 复制代码 代码如下: rule.style.setProperty('color','#00cc00',null); 因为style.color简单的多,所以我不想用这个seProperty()。 例子 打算改变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'; } 翻译地址: 转载请保留以下信息 作者:北玉

定义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()、getPropertyValue()及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属性中定义的内联样式,无法获取或设置样式表中的样式  

定义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对象)和<style>元素(HTMLStyleElement对象)包含的样式表。
样式表中一个大括号就是一个cssRule对象
var sheet=link.sheet||link.styleSheet;    //(非IE)使用sheet属性,(IE)使用styleSheet得到这个类型
var sheet=document.styleSheets[i];        //styleSheets: 获得当前网页的所有样式表对象

 

定义3:外部样式表(引用一个CSS样式表文件)Rules或rules

(1)  DOM(document对象)对象模型中有几个重要的集合 

doc1.images         [HTMLCollection] 所有图像
doc1.anchors        [HTMLCollection] 所有锚点
doc1.styleSheets  [StyleSheetList] 所有样式
doc1.links          [HTMLCollection] 所有链接

其中styleSheets包含所有的样式集合

(2) 样式表集合styleSheets -> 规则(选择器及样式)(css)rules ->某一样式.属性 style.attr

一个style元素标签(一个样式表)  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 修改样式 ,  获取或修改某个属性的值(兼容性问题) 
doc1.styleSheets[0].(css)rules[index].style.attr     //IE,W3C为(css),查找样式表中的样式属性(ie chrom)   

(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';

(2)W3C的方法是: 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 

版权声明:本文由龙竞技官网发布于竞技宝竞猜,转载请注明出处:JavaScript CSS修改学习第三章 修改样式表_基础知识_脚本之家