再谈动态添加样式规则(2)
作者:司徒正美 来源:Ruby's Louvre 发布时间:2009-09-02 13:10:00
还有几个生不逢时的方法:
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 capitalize = function(prop){
return prop.replace(/\b[a-z]/g, function(match){
return match.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))
}
}
原文:http://www.cnblogs.com/rubylouvre/archive/2009/08/30/1556869.html
猜你喜欢
- PL/SQL是ORACLE对标准数据库语言的扩展,ORACLE公司已经将PL/SQL整合到ORACLE 服务器和其他工具中了,近几年中更多的
- 一个js用星投票的例子,不是常见的图片版,当然你如果会点js代码的话应该可以改为更加美观的图片投票,原理都一样。本程序只演示了读取星的个数,
- SQL Server的以前版本在跟踪对象相关性方面做的并不好。原因是所有的对象相关性都是由对象ID来跟踪的,这意味着对象一开始就必须存在。但
- 可以使用 Application 对象在给定的应用程序的所有用户之间共享信息。基于 ASP 的应用程序同所有的 .asp 文件一样在一个虚拟
- 首先,建一个文件夹,把你要隐藏的文件放在里面,你的所有黑客程序什么的。假设你建的文件夹叫hacker然后呢,我们给这个文件夹加个扩展名(后缀
- MySQL Innodb 引擎优化,InnoDB给MySQL提供了具有提交,回滚和崩溃恢复能力的事务安全(ACID兼容)存储引擎。InnoD
- default-character-set=gbk #或gb2312,big5,utf8 然后重新启动mysql 运行->servic
- 根据google最新的算法规则:用户行为模式的重视程度越来越高,这也就要求网页设计的时候应注意“合理的网页结构”,SEO业界也有个共识“网页
- XML即可扩展标记语言(eXtensible Markup Language)。标记是指计算机所能理解的信息符号,通过此种标记,计算机之间可
- 在MySQL中,使用auto_increment类型的id字段作为表的主键,并用它作为其他表的外键,形成“主从表结构”,这是数据库设计中常见
- 问:Perl下应当如何连接Access数据库答:首先需要安装Win32-ODBC模块,具体的步骤如下:1:从TOOLS栏目中下载Win32-
- 顽固的Select下拉列表,一般很难用css来控制样式下面使用了js来美化select<!DOCTYPE html PUBLIC &q
- 一、控制用户存取 1、创建修改用户Creating Users Create/alter user new_user identified
- 在网站的一些应用中需要提供用户直接打印页面的功能,最明显的就是电子优惠券,商家根据网站提供的模板输入内容,然后生成优惠券页面,用户打印这个页
- 第一步肯定是打上SQL SERVER最新的安全补丁.如果这一步都没有做好,那我们也没有继续下去的必要了。 第二步是修改默认的1433端口,并
- 《色彩解答》系列之一 色彩层次《色彩解答》系列之二 色彩比例我们知道在设计中有很多对比,大小的对比,形状的对比,长短的对比,多少的对比,这些
- 大家都知道系统存储过程是无法用工具导出的(大家可以试试 >任务>生成SQL脚本) 因为系统存储过程一般是不让开发人员修改的。 需
- 因为要写个东西用到,所以百度了一下,居然有朋友乱写,而且比较多,都没有认真测试过,只对字符可以,但是对数字就不可以,而且通用性很差,需要修改
- 一、单字节SQL注入MYSQL的SQL注入已经由来已久,以下是普遍采用的注入步骤:1、在GET参数上加一个/*或者#(mysql专有的注释)
- 随着网络技术的不断发展,网络应用已经渗透到人类社会的各个角落。作为网络世界的支撑点的网站,更是人们关注的热点:政府利用网站宣传自己的施政纲领