再谈javascript 动态添加样式规则 W3C校检


Posted in Javascript onDecember 25, 2009

毫无疑问,基于表现与结构相分离的原则,直接导入一个新的样式表是最好的选择,但有些情况就行不通,如我们做一个能拖动的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下有问题,我基本不用它。

还有几个生不逢时的方法:

* nsertRule(rule,index): 添加一条样式规则。
* deleteRule(index): 移除一条样式规则。
* getPropertyValue(propertyName) 获取元素相应样式属性的值。如我们获得一个样式规则对象,可以利用CSSStyleRuleObject. getPropertyValue("color")获得其字体颜色的设置。与普通的el.style.color的方法相比,其效率相当高,因为 el.style.color获取的是内联样式,像IE那样的怪胎,如果你的元素没有设置style属性,根本无法得到准备的值,可能为空,可能是 inhert……可能还有兼容问题,而且这内联属性不一定是最终应用于元素的样式,IE只有调用不那么废物的 el.currentStyle[prop],其他浏览器就调用相当争气但有点麻烦的document. defaultView. getComputedStyle(el, "")[prop]。
* removeProperty(propertyName) 移除元素相应样式属性。
* setProperty(propertyName,value,priority)设定元素添加一个样式,还能指定优先级。

我们可以弄一个设定样式的函数出来:

var hyphenize =function(name){ 
return name.replace( /([A-Z])/g, "-$1" ).toLowerCase(); 
} var camelize = function(name){ 
return name.replace(/\-(\w)/g, function(all, letter){ 
return letter.toUpperCase(); 
}); 
} 
var setStyle = function(el, styles) { 
for (var property in styles) { 
if(!styles.hasOwnProperty(property)) continue; 
if(el.style.setProperty) { 
//必须是连字符风格,el.style.setProperty('background-color','red',null); 
el.style.setProperty(hyphenize(property),styles[property],null); 
} else { 
//必须是驼峰风格,如el.style.paddingLeft = "2em" 
el.style[camelize(property)] = styles[property] 
} 
} 
return true; 
}

使用方法:
setStyle(div,{ 
'left':0, 
'top':0, 
'line-height':'2em', 
'padding-right':'4px' 
});

不过我非常不喜欢这方法,生成的是内联样式,它还得特殊处理float与opacity。在IE7的内联样式中,滤镜还有一个Bug,一定要让其得到hasLayout,要不滤镜就不会生效(我们可以通过el.currentStyle.hasLayout查看其状况)。因此,如其一个个设置,不如用cssText一网打尽。

最后附上我的加强版addSheet方法。它增添自动处理opacity的功能,也就是说我们只需要按标准设置cssText,它会自动生成相应的滤镜,这样一来至少让火狐等浏览器通过W3C的校检。

var addSheet = function(){ 
var doc,cssCode; 
if(arguments.length == 1){ 
doc = document; 
cssCode = arguments[0] 
}else if(arguments.length == 2){ 
doc = arguments[0]; 
cssCode = arguments[1]; 
}else{ 
alert("addSheet函数最多接受两个参数!"); 
} 
if(!+"\v1"){//新增功能,用户只需输入W3C的透明样式,它会自动转换成IE的透明滤镜 
var t = cssCode.match(/opacity:(\d?\.\d+);/); 
if(t!= null){ 
cssCode = cssCode.replace(t[0], "filter:alpha(opacity="+ parseFloat(t[1]) * 100+");"); 
} 
} 
cssCode = cssCode + "\n";//增加末尾的换行符,方便在firebug下的查看。 
var headElement = doc.getElementsByTagName("head")[0]; 
var styleElements = headElement.getElementsByTagName("style"); 
if(styleElements.length == 0){//如果不存在style元素则创建 
if(doc.createStyleSheet){ //ie 
doc.createStyleSheet(); 
}else{ 
var tempStyleElement = doc.createElement('style');//w3c 
tempStyleElement.setAttribute("type", "text/css"); 
headElement.appendChild(tempStyleElement); 
} 
} 
var styleElement = styleElements[0]; 
var media = styleElement.getAttribute("media"); 
if(media != null && !/screen/.test(media.toLowerCase()) ){ 
styleElement.setAttribute("media","screen"); 
} 
if(styleElement.styleSheet){ //ie 
styleElement.styleSheet.cssText += cssCode;//添加新的内部样式 
}else if(doc.getBoxObjectFor){ 
styleElement.innerHTML += cssCode;//火狐支持直接innerHTML添加样式表字串 
}else{ 
styleElement.appendChild(doc.createTextNode(cssCode)) 
} 
}
Javascript 相关文章推荐
google 搜索框添加关键字实现代码
Apr 24 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
Oct 24 Javascript
Windows 系统下安装和部署Egret的开发环境
Jul 31 Javascript
全面理解闭包机制
Jul 11 Javascript
jquery文字填写自动高度的实现方法
Nov 07 Javascript
js实现产品缩略图效果
Mar 10 Javascript
JS+canvas绘制的动态机械表动画效果
Sep 12 Javascript
详解vue.js数据传递以及数据分发slot
Jan 20 Javascript
微信小程序如何播放腾讯视频的实现
Sep 20 Javascript
使用p5.js临摹动态图形
Oct 23 Javascript
JavaScript判断数据类型有几种方法及区别介绍
Sep 02 Javascript
Javascript之datagrid查询详解
Sep 15 Javascript
javascript 处理事件绑定的一些兼容写法
Dec 24 #Javascript
Javascript 键盘keyCode键码值表
Dec 24 #Javascript
JQuery与iframe交互实现代码
Dec 24 #Javascript
jquery 弹出登录窗口实现代码
Dec 24 #Javascript
Jquery 高亮显示文本中重要的关键字
Dec 24 #Javascript
JQuery 写的个性导航菜单
Dec 24 #Javascript
JavaScript中出现乱码的处理心得
Dec 24 #Javascript
You might like
谨慎使用PHP的引用原因分析
2012/09/06 PHP
php代码书写习惯优化小结
2013/06/20 PHP
Yii核心组件AssetManager原理分析
2014/12/02 PHP
thinkPHP实现签到功能的方法
2017/03/15 PHP
ThinkPHP框架结合Ajax实现用户名校验功能示例
2019/07/03 PHP
laravel多条件查询方法(and,or嵌套查询)
2019/10/09 PHP
利用jQuery的$.event.fix函数统一浏览器event事件处理
2009/12/21 Javascript
jQuery的三种$()
2009/12/30 Javascript
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
Javascript模块化编程(一)模块的写法最佳实践
2013/01/17 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
详解JavaScript中的4种类型识别方法
2015/09/14 Javascript
AngularJS控制器controller正确的通信的方法
2016/01/25 Javascript
jQuery实现查找最近父节点的方法
2016/06/23 Javascript
jQuery实现checkbox列表的全选、反选功能
2016/11/24 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
2016/12/08 Javascript
vue.js开发环境安装教程
2017/03/17 Javascript
详解ES6通过WeakMap解决内存泄漏问题
2018/03/09 Javascript
ES6的Fetch异步请求的实现方法
2018/12/07 Javascript
vue项目打包上传github并制作预览链接(pages)
2019/04/19 Javascript
解决ant Design Search无法输入内容的问题
2020/10/29 Javascript
[02:34]肉山说——泡妞篇
2014/09/16 DOTA
用Python遍历C盘dll文件的方法
2015/05/06 Python
Python使用Paramiko模块编写脚本进行远程服务器操作
2016/05/05 Python
分享python数据统计的一些小技巧
2016/07/21 Python
在pytorch中查看可训练参数的例子
2019/08/18 Python
带你彻底搞懂python操作mysql数据库(cursor游标讲解)
2020/01/06 Python
Python嵌入C/C++进行开发详解
2020/06/09 Python
为什么python比较流行
2020/06/19 Python
大学生农村教师实习自我鉴定
2013/09/21 职场文书
促销活动策划方案
2014/01/12 职场文书
毕业自我鉴定怎么写
2014/03/25 职场文书
《女娲补天》读后感5篇
2019/12/31 职场文书
CSS实现单选折叠菜单功能
2021/11/01 HTML / CSS
Python游戏开发实例之graphics实现AI五子棋
2021/11/01 Python
Python基本的内置数据类型及使用方法
2022/04/13 Python