再谈动态添加样式规则
作者:司徒正美 来源:Ruby's Louvre 发布时间:2009-09-02 13:10:00
以前我就是一篇博文 就给出一个好用的函数,它在我几篇博文中被广泛运用的。最近看了不少东西,于是便有了这篇博文,以梳理我学到的新东西。
毫无疑问,基于表现与结构相分离的原则,直接导入一个新的样式表是最好的选择,但有些情况就行不通,如我们做一个能拖动的DIV,从设置样式的角度看,就是把它绝对定位,以防影响原来的文档流,然后一点点改变其top与left的值实现移动的效果。由于拖动是有时间概念的,一秒24帧,样式表不可能面面俱到都把它们写进去。因此动态生成样式规则与快速修改样式规则是非常有必要的,W3C为此做了大量的工作,在DOM2.0中,扩充了不少接口。
退一步说,表现与结构相分离也不止导入样式表这一条路。要知道,一共有三种样式类型,外部样式,内部样式,与内联样式。
外部样式,就是我们上面说的那个,写在一个独立的CSS文件中。
内部样式,就是独立写在一个style标签中,通常是放在head标签中,我最后提供的函数生成的样式就是内部样式。
内联样式,就是写在元素的style属性中的样式。
新添加的接口主要集中在外部样式中——之所以说接口,因为相应的实现是由浏览器方提供的,像IE6那样傲慢的家伙,从来无视它们的存在。
在W3C的模型中,type为"text/css"的link标签与style标签都是代表一个CSSStyleSheet对象,我们可以通过document.styleSheets 获得当前页面中所有的CSSStyleSheet对象,不过这是一个集合,非单纯的数组。每一个CSSStyleSheet对象拥有如下属性,
type:永远返回“text/css”字符串。
disabled:和input的disabled的作用相同,默认是false。
href:返回URL,如果是style标签为null。
title:返回其title的值,title与普通元素的title无异,随你写什么。
media:IE与火狐返回的东西并不一致,不太好说。media是用来规定它拥有的样式规则对什么设备有效,默认是所有。
ownerRule:返回一个只读的CSSRule对象,如果样式表是用@import引入的话。
cssRules: 返回一个只读的样式规则对象(CSSStyleRule object)的集合。
样式规则对象(CSSStyleRule object),是W3C为了对样式进行更细致的设定而搞出来的,如下面这个东西就是对应一个样式规则对象:
button[type] {
padding:4px 10px 4px 7px;
line-height:17px;
}
样式规则对象拥有如下几个主要属性:type,cssText,parentStyleSheet,parentRule。
type有点类似节点的nodeType,对样式规则进行细分,它是用一个整数来表示其类型。具体情况如下
0: CSSRule.UNKNOWN_RULE
1: CSSRule.STYLE_RULE (定义一个CSSStyleRule对象)
2: CSSRule.CHARSET_RULE (定义一个CSSCharsetRule对象,用于设定当前样式表的字符集,默认与当前网页相同)
3: CSSRule.IMPORT_RULE (定义一个CSSImportRule对象,就是用@import引入其他的样式表)
4: CSSRule.MEDIA_RULE (定义一个CSSMediaRule对象,用于设定此样式是用于显示器,打印机还是投影机等等)
5: CSSRule.FONT_FACE_RULE (定义一个CSSFontFaceRule对象,CSS3的@font-face)
6: CSSRule.PAGE_RULE (定义一个CSSPageRule对象)
cssText不用多说,一个非常有用的属性,直接把字符串转换成样式规则,无视各浏览器样式属性的差异,如cssFloat 和styleFloat。
parentStyleSheet和parentRule都是针对@import来说的。不过,@import在IE下有问题,我基本不用它。
猜你喜欢
- 今天不小心又点了收藏夹里Google的新首页风格的地址,赫然发现又变了!从这个页面上线以来,偶尔会去看看,短短一年的时间,已经变换了至少三次
- 网页制作中是免不了与表格打交道的。表格是网页制作的基础,在网页布局中起着举足轻重的作用,熟练掌握表格的操作,是你制作网页的辅路石,也是你成为
- 有过相关经验的朋友都知道,Jscript的效率毕竟有限,在数组中查找数据时如果用常规的算法来做执行起来会很慢。例如在一个含500个字符串的d
- 突然想到写这个话题,是基于最近在设计产品界面时,年糕一直在给我们灌输设计的品牌概念以及文化内涵要求而产生的,因之前在界面设计中也遇到一些困惑
- javascript版 俄罗斯方块(Russian box)小游戏,喜欢的朋友可以玩玩。对源代码感兴趣的朋友也可以研究一下。玩法介绍:可以输
- 这样做的好处是:利用表格来装载数据,不言而喻是最好的,你可以很灵活的为每个单元格定义样式。下面是具体的做法首先在photoshop设计一个效
- 如题:我写入关键字到数据库,多的时候用|隔开了,我提取再做相关文章搜索的时候,我怎么提取用|隔开的文字啊,这样我就好用关键字做搜索啊 回复:
- 1、IIS为一个死循的执行过程设定执行时间(缺省为90秒)超时事件:<%response.buffer=true%><BO
- ASP如何分两段读取数据库?中间插入广告。代码如下:<!--#include file="conn.asp"--&
- 在数据库的开发过程中,经常会遇到复杂的业务逻辑和对数据库的操作,这个时候就会用SP来封装数据库操作。如果项目的SP较多,书写又没有一定的规范
- 以前的服务器,由于内存的价格过高,一般配置的内存不是很多,超过4GB的当然就不多了.现在的服务器,配置超过4GB就很多,在配作SQL 数据库
- <%MaxPerPage=8 ’定义页面最大的记录数为8<br>
- 今天在做sql Server 2005的实验的时候碰到的问题,问题描述很清楚,怀疑是我以前给计算机修改了名称而导致的.可以用select @
- JScript 具有全范围的运算符,包括算术、逻辑、位、赋值以及其他某些运算符。算术运算符描述 符号 负值 - 递增 ++ 递减 ? 乘法
- 一直以来,jQuery是我最喜欢的框架之一。1月14号 1.4 Released版本发布后,就迫不及待去了解了一下1.4版本对比以往1.3.
- 在文章《用CSS实现柱状图(Bar Graph)的方法总结与比较(三)》中我强调说不同浏览器对于相同元素的默认样式并不一致,这也是为什么我们
- 说到 IE 的 bug,一个臭名昭著的例子是它对于“盒模型”的错误解释:在 IE5.x 以及 Quirks 模式的 IE6/7 中,将 bo
- SQL Server 2005的新功能为动态管理对象,它们是在指定时间返回某个数据库实例的特殊状态信息的数据库视图或函数。这些对象允许数据库
- 三、支持XML的公司和它们的开发工具 尽管XML还处在开发阶段,其标准正在由W3C组织制定,但是已经有许多公司表示全力支持XML,并开发了不
- 如何实现优惠打折? 代码及说明见下:<%@ LANG