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


Posted in Javascript onApril 01, 2010
#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);
Javascript 相关文章推荐
超级退弹代码
Jul 07 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
Nov 19 Javascript
Extjs4中的分页应用结合前后台
Dec 13 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
May 01 Javascript
如何利用AngularJS打造一款简单Web应用
Dec 05 Javascript
JS中的==运算: [''] == false —&gt;true
Jul 24 Javascript
jQuery特殊符号转义的实现
Nov 30 Javascript
javascript 动态生成css代码的两种方法
Mar 17 Javascript
小程序兼容安卓和IOS数据处理问题及坑
Sep 18 Javascript
cdn模式下vue的基本用法详解
Oct 07 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
Nov 28 Javascript
js实现表格单列按字母排序
Aug 12 Javascript
Javascript 通过json自动生成Dom的代码
Apr 01 #Javascript
JS中confirm,alert,prompt函数使用区别分析
Apr 01 #Javascript
JavaScript中实现块作用域的方法
Apr 01 #Javascript
cloudgamer出品ImageZoom 图片放大效果
Apr 01 #Javascript
js 异步处理进度条
Apr 01 #Javascript
JavaScript中String和StringBuffer的速度之争
Apr 01 #Javascript
Cookie 小记
Apr 01 #Javascript
You might like
如何删除多级目录
2006/10/09 PHP
解决php中Cannot send session cache limiter 的问题的方法
2007/04/27 PHP
PHP无限分类(树形类)的深入分析
2013/06/02 PHP
div li的多行多列 无刷新分页示例代码
2013/10/16 PHP
PHP实现将科学计数法转换为原始数字字符串的方法
2014/12/16 PHP
PHP 二维数组和三维数组的过滤
2016/03/16 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
在页面上点击任一链接时触发一个事件的代码
2007/04/07 Javascript
js报错 Object doesn't support this property or method的原因分析
2011/03/31 Javascript
用js实现trim()的解决办法
2013/04/16 Javascript
JQuery操作单选按钮以及复选按钮示例
2013/09/23 Javascript
JavaScript DOM节点添加示例
2014/07/16 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
2015/11/24 Javascript
jQuery插件简单学习实例教程
2016/07/01 Javascript
angularJs关于指令的一些冷门属性详解
2016/10/24 Javascript
用 js 的 selection range 操作选择区域内容和图片
2017/04/18 Javascript
浅谈关于axios和session的一些事
2017/07/13 Javascript
bootstrap是什么_动力节点Java学院整理
2017/07/14 Javascript
Node.js五大应用性能技巧小结(必须收藏)
2017/08/09 Javascript
最基础的vue.js双向绑定操作
2017/08/23 Javascript
微信小程序自定义tab实现多层tab嵌套功能
2018/06/15 Javascript
nodejs提示:cross-device link not permitted, rename错误的解决方法
2019/06/10 NodeJs
python连接oracle数据库实例
2014/10/17 Python
django admin 添加自定义链接方式
2020/03/11 Python
python golang中grpc 使用示例代码详解
2020/06/03 Python
原装进口全世界:天猫国际
2016/08/03 全球购物
美国二手复古奢侈品包包购物网站:LXRandCo
2019/06/18 全球购物
俄罗斯香水和化妆品网上商店:NOTINO.ru
2019/12/17 全球购物
乌克兰设计师和品牌的服装:Love&Live
2020/04/14 全球购物
ddl,dml和dcl的含义
2016/05/08 面试题
行政部主管岗位职责
2013/12/28 职场文书
白酒市场开发计划书
2014/01/09 职场文书
中华美德颂演讲稿
2014/05/20 职场文书
《倍数和因数》教学反思
2016/02/23 职场文书
OpenCV全景图像拼接的实现示例
2021/06/05 Python
win10电脑老是死机怎么办?win10系统老是死机的解决方法
2022/08/05 数码科技