JavaScript CSS修改学习第三章 修改样式表
JavaScript CSS修改学习第三章 修改样式表
发布时间:2016-12-30 来源:查字典编辑
摘要:请注意代码和传统的DHTML的区别。在DHTML你通过直接修改页面上的特定元素来改变样式,而这里的代码修改的是样式表。在这里查看W3CDOM...

请注意代码和传统的DHTML的区别。在DHTML你通过直接修改页面上的特定元素来改变样式,而这里的代码修改的是样式表。

在这里查看W3C DOM-CSS的兼容性列表。

定义

一个页面总是包含一个或者几个样式表,一个样式表里面包含一条或者几条规则,一条规则里有详细的样式声明。这个页面的样式表如下:

复制代码 代码如下:

<link rel="stylesheet" href="../quirksmode.css">

<style>

<>

</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教程学习
热门Javascript教程学习
编程开发子分类