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


Posted in Javascript onFebruary 19, 2010

请注意代码和传统的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 相关文章推荐
jquery解析JSON数据示例代码
Mar 17 Javascript
jquery显示隐藏input对象
Jul 21 Javascript
使用jQuery简单实现模拟浏览器搜索功能
Dec 21 Javascript
AngularJS表单编辑提交功能实例
Feb 13 Javascript
基于jquery实现复选框全选,反选,全不选等功能
Oct 16 Javascript
浅析JSONP技术原理及实现
Jun 08 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
Jul 05 Javascript
js模块加载方式浅析
Aug 12 Javascript
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
Angular5集成eventbus的示例代码
Jul 19 Javascript
ES6使用export和import实现模块化的方法
Sep 10 Javascript
Vue 实现从小到大的横向滑动效果详解
Oct 16 Javascript
JavaScript CSS修改学习第二章 样式
Feb 19 #Javascript
JavaScript CSS修改学习第一章 查找位置
Feb 19 #Javascript
JavaScript DOM 学习第九章 选取范围的介绍
Feb 19 #Javascript
JavaScript DOM学习第八章 表单错误提示
Feb 19 #Javascript
JavaScript DOM 学习第七章 表单的扩展
Feb 19 #Javascript
JavaScript DOM学习第六章 表单实例
Feb 19 #Javascript
JavaScript DOM 学习第五章 表单简介
Feb 19 #Javascript
You might like
php函数array_merge用法一例(合并同类数组)
2013/02/03 PHP
将word转化为swf 如同百度文库般阅读实现思路及代码
2013/08/09 PHP
php获取从百度搜索进入网站的关键词的详细代码
2014/01/08 PHP
PHP实现根据密码长度显示安全条
2017/07/04 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
layui数据表格自定义每页条数limit设置
2019/10/26 PHP
表单类各种类型(文本框)失去焦点效果jquery代码
2013/04/26 Javascript
javascript scrollTop正解使用方法
2013/11/14 Javascript
javaScript如何生成xmlhttp
2013/12/16 Javascript
Javascript中浮点数相乘的一个解决方法
2014/06/03 Javascript
jQuery多项选项卡的实现思路附样式及代码
2014/06/03 Javascript
AngularJS入门教程(一):静态模板
2014/12/06 Javascript
在AngularJS中使用jQuery的zTree插件的方法
2016/04/21 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
2016/09/24 Javascript
详解Angular的数据显示优化处理
2016/12/26 Javascript
用JavaScript实现让浏览器停止载入页面的方法
2017/01/19 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
2017/07/05 Javascript
基于BootStrap的文本编辑器组件Summernote
2017/10/27 Javascript
基于js文件加载优化(详解)
2018/01/03 Javascript
vue ssr 实现方式(学习笔记)
2019/01/18 Javascript
JS计算斐波拉切代码实例
2019/09/12 Javascript
[51:27]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python写的Socks5协议代理服务器
2014/08/06 Python
完美解决在oj中Python的循环输入问题
2018/06/25 Python
利用python提取wav文件的mfcc方法
2019/01/09 Python
Python3 解决读取中文文件txt编码的问题
2019/12/20 Python
python如何设置静态变量
2020/09/07 Python
CSS3中设置3D变形的transform-style属性详解
2016/05/23 HTML / CSS
可能这些是你想要的H5软键盘兼容方案(小结)
2019/04/23 HTML / CSS
娇韵诗加拿大官网:Clarins加拿大
2017/11/20 全球购物
帕克纽约:PARKER NY
2018/12/09 全球购物
考试不及格的检讨书
2014/01/22 职场文书
家长对老师的感言
2014/03/11 职场文书
工作汇报开头与结尾怎么写
2014/11/08 职场文书
2015年车间安全管理工作总结
2015/05/13 职场文书
git stash(储藏)的用法总结
2022/06/25 Servers