繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JavaScript CSS修改学习第三章 修改样式表
- Javascript
- 实现表格中行点击时的渐扩效果！
- 多图展示滑动过渡效果
- 弹出自适应图片大小的窗口弹出窗口根据图片大小，自动判断高和宽。
- 拖动Html元素集合 Drag and Drop any item
- 脚本吧 - 幻宇工作室用到js,超强推荐base.js
- 使用透明叠加法美化文件上传界面
- JavaScript高级程序设计
- 对象的类型：本地对象(1)
- 如何实现表格中行点击时的渐扩效果！
- 使用button标签，实现三态图片按钮
- 根据分辩率调用不同的CSS.
- Web版彷 Visual Studio 2003 颜色选择器
- JS中简单的实现像C#中using功能（有源码下载）
- js之WEB开发调试利器:Firebug 下载
- jQuery中文入门指南，翻译加实例，jQuery的起点教程
- jQuery 1.0.4 - New Wave Javascript(js源文件)
- 强悍无比的WEB开发好助手FireBug(Firefox Plugin)
- 换肤测试程序js脚本
- xWin之JS版(2-26更新)
- 共享自己写一个框架DreamScript
Javascript 中的 JavaScript CSS修改学习第三章 修改样式表
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-02-27 浏览: 189 ::
收藏到网摘: n/a
在这一章我打算通过直接修改页面的样式表而不是通过访问元素的办法来修改PRE的背景颜色。不幸的是，浏览器严重的不兼容性让这个代码基本上不能使用。
请注意代码和传统的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) All
