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 相关文章推荐
JavaScript中window、doucment、body的解释
Aug 14 Javascript
jQuery获取当前对象标签名称的方法
Feb 07 Javascript
Angularjs实现多个页面共享数据的方式
Mar 29 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
May 30 Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
Aug 26 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
Feb 09 Javascript
基于vue2.0实现的级联选择器
Jun 09 Javascript
微信小程序 获取二维码实例详解
Jun 23 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
Jul 24 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
Nov 29 Javascript
vue-cli点击实现全屏功能
Mar 07 Javascript
详解vue路由
Aug 05 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数据采集的详解
2013/06/02 PHP
php实现自动获取生成文章主题关键词功能的深入分析
2013/06/03 PHP
php获取新浪微博数据API实例
2013/11/12 PHP
Zend Framework教程之Zend_Controller_Plugin插件用法详解
2016/03/07 PHP
Thinkphp3.2.3整合phpqrcode生成带logo的二维码
2016/07/21 PHP
基于CI框架的微信网页授权库示例
2016/11/25 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
关于laravel框架中的常用目录路径函数
2019/10/23 PHP
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
2006/12/23 Javascript
JS 自定义函数缺省值的设置方法
2010/05/05 Javascript
javascript中获取下个月一号,是星期几
2012/06/01 Javascript
使用js操作css实现js改变背景图片示例
2014/03/10 Javascript
用js格式化金额可设置保留的小数位数
2014/05/09 Javascript
JS根据生日算年龄的方法
2015/05/05 Javascript
jQuery获取select选中的option的value值实现方法
2016/08/29 Javascript
nodejs进阶(6)—连接MySQL数据库示例
2017/01/07 NodeJs
使用JS组件实现带ToolTip验证框的实例代码
2017/08/23 Javascript
详解如何在react中搭建d3力导向图
2018/01/12 Javascript
使用webpack编译es6代码的方法步骤
2019/04/28 Javascript
微信小程序实现form表单本地储存数据
2019/06/27 Javascript
微信小程序音乐播放器开发
2019/11/20 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
2020/10/15 Javascript
[25:45]2018DOTA2亚洲邀请赛4.5SOLO赛 Sylar vs Paparazi
2018/04/06 DOTA
跟老齐学Python之大话题小函数(1)
2014/10/10 Python
分享一下Python 开发者节省时间的10个方法
2015/10/02 Python
Python教程之全局变量用法
2016/06/27 Python
django-rest-framework 自定义swagger过程详解
2019/07/18 Python
python 命令行传入参数实现解析
2019/08/30 Python
用python拟合等角螺线的实现示例
2019/12/27 Python
Python统计学一数据的概括性度量详解
2020/03/03 Python
详解Open Folder as PyCharm Project怎么添加的方法
2020/12/29 Python
数控技术专科生自我评价
2014/01/08 职场文书
年终考核实施方案
2014/05/26 职场文书
2014客服代表实习自我鉴定
2014/09/18 职场文书
2014年政风行风自查自纠报告
2014/10/21 职场文书
教你如何用Python实现人脸识别(含源代码)
2021/06/23 Python