JS getStyle获取最终样式函数代码

 更新时间:2010年04月01日 18:02:12   作者:  
定义一个id="flower"的div元素 并设置如上样式,我们的目标就是通过javascript来获取样式的最终属性

复制代码 代码如下:

#flower {
width:100px;
font-size:12px;
float:left;
opacity:0.5;
filter:alpha(opacity=50);
}

定义一个id="flower"的div元素 并设置如上样式,我们的目标就是通过javascript来获取样式的最终属性
<div id="flower" >...</div>
getStyle函数:
这里用到了三个原型扩展
String.prototype.capitalize 这个方法是让字符串首字母大写
Array.prototype.contains 判断数组中是否有指定成员
String.prototype.camelize 这个是让"font-size" 字符串转换成 "fontSize" 这样的格式用来获取样式
复制代码 代码如下:

String.prototype.capitalize=function(){
return this.charAt(0).toUpperCase() + this.substring(1).toLowerCase();
}
Array.prototype.contains=function(A){
return (this.indexOf(A) >= 0);
}
String.prototype.camelize=function(){
return this.replace(/\-(\w)/ig,
function(B, A) {
return A.toUpperCase();
});
}
var css={
getStyle:function(elem,styles){
var value,
elem=document.getElementById(elem);
if(styles == "float"){
document.defaultView ? styles = 'float' /*cssFloat*/ : styles='styleFloat';
}
value=elem.style[styles] || elem.style[styles.camelize()];
if(!value){
if (document.defaultView && document.defaultView.getComputedStyle) {
var _css=document.defaultView.getComputedStyle(elem, null);
value= _css ? _css.getPropertyValue(styles) : null;
}else{
if (elem.currentStyle){
value = elem.currentStyle[styles.camelize()];
}
}
}
if(value=="auto" && ["width","height"].contains(styles) && elem.style.display!="none"){
value=elem["offset"+styles.capitalize()]+"px";
}
if(styles == "opacity"){
try {
value = elem.filters['DXImageTransform.Microsoft.Alpha'].opacity;
value =value/100;
}catch(e) {
try {
value = elem.filters('alpha').opacity;
} catch(err){}
}
}
return value=="auto" ? null :value;
}
}
css.getStyle("flower","width"); //100px;
css.getStyle("flower","font-size");//12px;
css.getStyle("flower","float");//left
css.getStyle("flower","opacity");//0.5

先回顾下基础
style 标准的样式!可能是由style属性指定的!
runtimeStyle 运行时的样式!如果与style的属性重叠,将覆盖style的属性!
currentStyle 指 style 和 runtimeStyle 的结合!
style 内联的样式
currentStyle 代表了在全局样式表、内嵌样式和 HTML 标签属性中指定的对象格式和样式
runtimeStyle 代表了居于全局样式表、内嵌样式和 HTML 标签属性指定的格式和样式之上的对象的格式和样式
(FF中没有currentStyle 和runtimeStyle)
getStyle(元素id,获取属性);
获取元素style标签内的样式
elem.style[styles] || elem.style[styles.camelize()]
支持传入"font-size"的写法
但这并不是最终的样式 .
获取最终样式 有两终办法 一个是
document.defaultView.getComputedStyle //w3c的方法
还有就是通过 elem.currentStyle["..."] //ie下的方法
currentStyle 方法 需要将带"-"字符的属性 需要通过String.prototype.camelize转换成ie可识别的属性
复制代码 代码如下:

if(value=="auto" && ["width","height"].contains(styles) && elem.style.display!="none"){
value=elem["offset"+styles.capitalize()]+"px";
}

当 css中定义 元素的宽度为 auto时,并不能获取元素的最终宽度是多少,我们可以用 offsetWidth 和 offsetHeight 获取实际值
当然前提是要在元素为"可见"的状态下!
复制代码 代码如下:

try {
value = elem.filters['DXImageTransform.Microsoft.Alpha'].opacity;
value =value/100;
}catch(e) {
try {
value = elem.filters('alpha').opacity;
} catch(err){}
}

这是获取透明度的方法,ie中定义透明度和其他浏览器不同.需把通过滤镜得到的opacity值/100。返回标准的opacity值(范围0-1);

相关文章

  • HTML中使背景图片自适应浏览器大小实例详解

    HTML中使背景图片自适应浏览器大小实例详解

    这篇文章主要介绍了HTML中使背景图片自适应浏览器大小实例详解的相关资料,需要的朋友可以参考下
    2017-04-04
  • JS 音频可视化插件Wavesurfer.js的使用教程

    JS 音频可视化插件Wavesurfer.js的使用教程

    Wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件,本文主要记录它及其视觉效果插件Regions插件的使用方法,感兴趣的朋友跟随小编一起看看吧
    2018-10-10
  • javascript Array对象使用小结

    javascript Array对象使用小结

    数组是一段线性分配的内存,它通过整数去计算偏移并访问其中的元素。数组是很快的数据结构,但不幸的是,Javascript并没有像这种数组一样的数据结构。
    2009-12-12
  • JavaScript实现电灯开关小案例

    JavaScript实现电灯开关小案例

    这篇文章主要为大家详细介绍了JavaScript实现电灯开关小案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • 如何防止JavaScript自动插入分号

    如何防止JavaScript自动插入分号

    JavaScript语言有一个机制:在解析时,能够在一句话后面自动插入一个分号,用来修改语句末尾遗漏的分号分隔符。然而,由于这个自动插入的分号与JavaScript语言的另一个机制发生了冲突,即所有空格符都被忽略,因此程序可以利用空格格式化代码
    2015-11-11
  • 解决layui的table.checkStatus失效问题

    解决layui的table.checkStatus失效问题

    这篇文章主要介绍了解决layui的table.checkStatus失效问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • 一分钟学会JavaScript中的try-catch

    一分钟学会JavaScript中的try-catch

    这篇文章主要给大家介绍了关于如何通过一分钟学会JavaScript中try-catch的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • Javascript Function对象扩展之延时执行函数

    Javascript Function对象扩展之延时执行函数

    这篇文章主要介绍 在js里面怎么延时执行一个函数?
    2010-07-07
  • JS实现简单的浮动碰撞效果示例

    JS实现简单的浮动碰撞效果示例

    这篇文章主要介绍了JS实现简单的浮动碰撞效果,类似于广告悬浮图片在屏幕上来回碰撞的效果,涉及javascript结合时间动态操作页面元素属性的相关技巧,需要的朋友可以参考下
    2017-12-12
  • 一个简易的js图片轮播效果

    一个简易的js图片轮播效果

    这篇文章主要为大家详细介绍了一个简易的js图片轮播效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07

最新评论