请注意代码和传统的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)

标签:
JavaScript,CSS,修改样式表

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“JavaScript CSS修改学习第三章 修改样式表”

暂无“JavaScript CSS修改学习第三章 修改样式表”评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。