`
guoyiqi
  • 浏览: 962234 次
社区版块
存档分类
最新评论

currentStyle IE和ff 获取外联样式(转自:http://hi.baidu.com/aganle/blog/item/86109bcf27d2b70b93457e41.html)

 
阅读更多

IE及OP可使用currentStyle,具体用法可参考《DHTML手册》
Firefox等浏览器可以使用下面的方式来获取

window.getComputedStyle(element,'').getPropertyValue(stylevalue);

注意这2中方式都是只读的。

于是写了个公用的函数:

functiongetStyle(ele,value){/*----- 获取元素的真实style -----*/
varrs;
if(ele.style[value]){
rs=ele.style[value];
}elseif(window.getComputedStyle){
value=value.replace(/([A-Z])/g,"-$1");
rs=window.getComputedStyle(ele,'').getPropertyValue(value);
if(value=='color'){rs=colorToHex(rs);}//格式化color为16进制表示
}elseif(ele.currentStyle){
rs=ele.currentStyle[value];
}else{
returnnull;
}
returnrs;
}

但各浏览器获取color的值不同(ff/sa为rgb值,op为十六进制值,currentStyle获取的是css里面的原始有效值)
因此需要对color值进行转换(十六进制表示,无法格式化预命名颜色):

functioncolorToHex(color){/*----- 以十六进制格式化style中的color,无法格式化预命名颜色 -----*/
varrgb=/rgb/((/d{1,3}),(/s)*(/d{1,3}),(/s)*(/d{1,3})/)/;//rgb正则,结果序数为1、3、5
varnoun=/^/w+/;//预命名颜色正则
varrs;
if(rgb.test(color)){
varrgbfix=rgb.exec(color);
varr,g,b;
r=parseInt(rgbfix[1]).toString(16);
g=parseInt(rgbfix[3]).toString(16);
b=parseInt(rgbfix[5]).toString(16);
rs='#'+(r<10?'0'+r:r)+(g<10?'0'+g:g)+(b<10?'0'+b:b);
}else{
rs=color;
}
if(rs.length==4&& !noun.test(rs)){rs=rs+rs.split('#')[1]}//修正简写的十六进制,采取length判断方式
returnrs;
}

5.23
修正getPropertyValue方法获取类似于paddingLeft的值的问题
优化效率:有style属性定义时优先取style的值、color值修正仅在getComputedStyle取值时进行

分享到:
评论

相关推荐

    【JavaScript源代码】JavaScript style对象与CurrentStyle对象案例详解.docx

    JavaScript style对象与CurrentStyle对象案例详解  1、Style对象 style对象代表一个单独的样式声明,可以从应用样式的文档元素访问Style对象。style对象获取的是内联样式,即元素标签中style属性的值。 例子: ...

    JavaScript Table行定位效果

    给tr设置relative后就能相对table定位了,看来很简单啊,但问题是这个方法ie8和ff都无效,而且存在很多问题,所以很快就被抛弃了。 ps:该效果用来做tr的拖动会很方便。 接着想到的是给table插入一个新tr,克隆原来...

    获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)

    可是DOM.style这种写法只能访问...其中 IE中这个对象叫做currentStyle,FF中这个对象叫做document.defaultView。我将这两个类打包了一下,做了一个用于访问 样式信息的函数,如下: 代码如下: //=====================

    javascript获取隐藏元素(display:none)的高度和宽度的方法

    js获取可见元素的尺寸还是比较方便的,这个可以直接使用这个方法: 代码如下:function getDefaultStyle(obj,attribute){ // 返回最终样式函数,兼容IE和DOM,设置参数:元素对象、样式特性 return obj.currentStyle...

    JavaScript 图片滑动切换效果

    原理就是通过不断设置滑动对象的left(水平切换)和top(垂直切换)来实现图片切换的动态效果。 首先需要一个容器,程序会自动设置容器overflow为hidden,如果不是相对或绝对定位会同时设置position为relative, 滑动...

    javascript兼容性(实例讲解)

    //兼容IE 6,7,8浏览器 } 2.获取某个元素的CSS属性值: //获取某个元素的CSS属性值 function getStyle(element,stylename){ if(element.currentStyle){ //IE return element.currentStyle[stylename]; }else{ /...

    animate.js

    //获取任意一个元素的任意一个属性的当前的值---当前属性的位置值 function getStyle(element, attr) { return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle...

    js分页效果2兼容FOX

    &lt;style type="text/css" title="currentStyle" media="screen"&gt; /* Paginator */ .paginator { font: 14.8px normal Arial, Helvetica, sans-serif; color: #666666; margin-top: 10px; margin-bottom: 5px; ...

    元素未显示设置width/height时IE中使用currentStyle获取为auto

    我们知道获取元素的实际宽高在IE中可以使用currentStyle属性。但如果没有显示的去设置元素的宽高,那么使用该属性将获取不到,获取的值为auto。如下 代码如下: &lt;div&gt;abcd&lt;/div&gt; [removed] var div = document....

    getComputedStyle与currentStyle获取样式(style/class)

    大家都知道,用document.getElementById(‘element’).style.xxx可以获取元素的样式信息,可是它获取的只是DOM元素style属性里的样式规则,对于通过class属性引用的外部样式表,就拿不到我们要的信息了。 DOM标准里...

    IE6升级到IE9兼容性问题和操作手册

    第一节:IE7-IE8更新 3 1. 如果缺少结束标记的 P 元素后跟 TABLE、FORM、NOFRAMES 或 NOSCRIPT 元素,会自动添加结束标记。 3 2. 支持格式正确的有效标记,不再支持格式错误的 HTML。 4 第二节: IE8-IE9更新 5 1. 表...

    eclipse-testng 离线包下载

    eclipse-testng 离线包 ... return elem.currentStyle[s]; } else if (document.defaultView.getComputedStyle) { return document.defaultView.getComputedStyle(elem, null).getPropertyValue(prop); } } ...

    JS获取CSS样式(style/getComputedStyle/currentStyle)

    CSS的样式分为三类: 内嵌样式:是写在Tag里面的,内嵌样式只对所有的Tag有效。 内部样式:是写在HTML的里面的,内部样式只对所在的网页有效。...currentStyle是IE浏览器的一个属性,返回的是CSS样式对象 el

    IE及firefox下获取及设置样式值的代码

    } function getStyle(obj,styleName) { if(obj.currentStyle) //for ies { return obj.currentStyle[styleName]; //注意获取方式 } else //for others { return document.defaultView.getComputedStyle(obj,null)....

    javascript 获取元素样式必杀技

    但是对于外部定义的css样式使用这种方式就无法获取了,而且IE浏览器和其他标准浏览器(Firefox,Chrome,Opera,Safari)使用的方法不一样,IE浏览器使用element.currentStyle,W3C标准浏览器使用getComputedStyle...

    javascript 缓冲运动框架的实现

    //获取非行间样式和行间样式 function getStyle(obj,name) { if(obj.currentStyle){ return obj.currentStyle[name]; } else { return getComputedStyle(obj,false)[name]; } } //获取非行间样式和行间样式 //...

    js获取元素外链样式的方法

    本文实例讲述了js获取元素外链样式的方法。...在标准浏览器中可以通过window.getComputedStyll(obj,null)[property]来获取外链样式,但是在ie浏览器中则是通过obj.currentStyle来获取。 完整html代码如下:

Global site tag (gtag.js) - Google Analytics