JavaScript CSS修改学习第三章 修改样式表

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


代码如下:

<link rel="stylesheet" href="../quirksmode.css">
<style>
<!--
@import url("test.css");
p,h2,h3 {
    padding-right: 10px;
}
pre.test + * {
    margin-right: 20%;
}
pre.test {
    background-color: #ffffff;
}
-->
</style>

我们的目的是修改pre.test的白色背景为#EEF0F5。
样式表
所有外链或者内嵌的样式表都能通过document.styleSheets数组访问。quirksmode.css,这个网站的通用样式表保存在document.styleSheets[0]里。上面这段特别的样式表段就保存在document.styleSheets[1]。我们就在这段代码上进行测试。
cssRules[]和rules[]
一条规则就是一个或者多个元素的一组声明。这里有两种访问规则的方法。W3C坚持使用cssRules[],而微软坚持rules[]。两种方法都是用索引数字,第一条规则就是(css)Rules[0],第二条就是(css)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("test.css");
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';
}

翻译地址:http://www.quirksmode.org/dom/changess.html
转载请保留以下信息
作者:北玉(tw:@rehawk)

(0)

相关推荐

  • javascript 动态修改样式和层叠样式表代码

    W3C DOM2样式规则 ========================================================== CSSStyleSheet对象 CSSStyleSheet对象表示的是所有CSS样式表,包括外部样式表和使用<style type="text/css"></style>标签指定的嵌入式样式表. CSSStyleSheet同样构建于其他的DOM2 CSS对象基础之 上,而CSSStyleRule对象表示的则样式表中的每条

  • JS函数实现动态添加CSS样式表文件

    先给出函数. 复制代码 代码如下: varaddSheet=function(){ vardoc,cssCode; if(arguments.length==1){ doc=document; cssCode=arguments[0] }elseif(arguments.length==2){ doc=arguments[0]; cssCode=arguments[1]; }else{ alert("addSheet函数最多接受两个参数!"); } if(!+"v1"

  • JS 控制CSS样式表

    下面先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... <style type="text/css"> .orig { display: none; } </style> 你想要改变把他的display属性由none改为inline. 解决办法: 在IE里: document.styleSheets[0].rules[0].style.display = "inline"; 在firef

  • JS修改css样式style浅谈

    一.局部改变样式 分为改变直接样式,改变className和改变cssText三种.需要注意的是: 注意大小写: javascript对大小写十分敏感,className不能够把"N"写成"n",cssText也不能够把"T"写成"t",否则无法实现效果. 调用方法: 如果改变className,则事先在样式表中申明类,但调用时不要再跟style,像document.getElementById('obj').style.cl

  • Javascript 访问样式表实现代码

    再记录一下 Javascript访问样式表 Javascript可以访问网页中元素的style属性,例如: <div id="main" style="background-color:red"></div> 通过js访问style属性 alert(document.getElementById("main").style.backgroundColor); 通过js改变style属性 document.getElemen

  • javascript判断ie浏览器6/7版本加载不同样式表的实现代码

    关键点:1.对浏览器版本的判断:2.修改样式表路径 其中第二点也常用在实时修改网页模板.论坛风格的场合,实际上就是修改样式表路径来加载不同的样式表. 代码: 复制代码 代码如下: <script type="text/javascript"> var browser=navigator.appName var b_version=navigator.appVersion var version=b_version.split(";"); try{ //代

  • 使用JavaScript创建新样式表和新样式规则

    如今的这个年代,流行在Web页面上使用了大量的JavaScript,我们需要寻找各种方式来优化它们,使它们更快.我们使用事件委托来让事件监听器更有效率,使用降频技术来限定某些方法的使用次数,使用各种JavaScript加载器来动态加载我们需要的资源,等等.另外一种让页面更高效.更敏捷的方法是动态的添加或移除样式表里的样式,而不需要去查询DOM元素,对每个元素做样式调整.下面我们就来看看如何使用这种技术! 捕获样式表 你的页面上可能引用了不只一个的样式文件,你可以选择其中的一个.如果你指定了某个,

  • JavaScript实现动态创建CSS样式规则方案

    现在Web应用中有大量的JavaScript代码,而我们也一直在追寻各种使他们更快的解决方案. 1.我们通过 事件代理(event delegation) 让事件监听更高效, 2.我们利用 函数降频技术(function debouncing)来限制一段时间内给定方法被调用的次数,请参考:如何防止事件函数的高频触发(中文翻译) 3.我们使用 JavaScript加载器 来加载我们确实需要的那部分资源,等等. 还有一种方式,可以让我们的页面更加的快速和高效.那就是直接通过JS动态地添加和删除样式表

  • 再谈javascript 动态添加样式规则 W3C校检

    毫无疑问,基于表现与结构相分离的原则,直接导入一个新的样式表是最好的选择,但有些情况就行不通,如我们做一个能拖动的DIV,从设置样式的角度看,就是把它绝对定位,以防影响原来的文档流,然后一点点改变其top与left的值实现移动的效果.由于拖动是有时间概念的,一秒24帧,样式表不可能面面俱到都把它们写进去.因此动态生成样式规则与快速修改样式规则是非常有必要的,W3C为此做了大量的工作,在DOM2.0中,扩充了不少接口. 退一步说,表现与结构相分离也不止导入样式表这一条路.要知道,一共有三种样式类型

  • JavaScript修改css样式style

    一.局部改变样式 分为改变直接样式,改变className和改变cssText三种.需要注意的是: 注意大小写: javascript对大小写十分敏感,className不能够把"N"写成"n",cssText也不能够把"T"写成"t",否则无法实现效果. 调用方法: 如果改变className,则事先在样式表中申明类,但调用时不要再跟style,像document.getElementById('obj').style.cl

随机推荐