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 相关文章推荐
Javascript级联下拉菜单以及AJAX数据验证核心代码
May 10 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
May 12 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
Jun 24 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
Apr 05 Javascript
JavaScript如何实现跨域请求
Aug 05 Javascript
JS简单实现禁止访问某个页面的方法
Sep 13 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
Nov 22 Javascript
第一次记录Bootstrap table学习笔记(1)
May 18 Javascript
JavaScript的Object.defineProperty详解
Jul 09 Javascript
微信小程序tabbar底部导航
Nov 05 Javascript
angular6开发steps步骤条组件
Jul 04 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
Mar 04 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/07/12 PHP
一个程序下载的管理程序(三)
2006/10/09 PHP
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
自编函数解决pathinfo()函数处理中文问题
2014/11/03 PHP
php单例模式的简单实现方法
2016/06/10 PHP
实例解析php的数据类型
2018/10/24 PHP
PHP实现数组和对象的相互转换操作示例
2019/03/20 PHP
PHP设计模式(九)外观模式Facade实例详解【结构型】
2020/05/02 PHP
JS高级拖动技术 setCapture,releaseCapture
2011/07/31 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
2013/05/03 Javascript
JavaScript异步编程:异步数据收集的具体方法
2013/08/19 Javascript
JavaScript打印iframe内容示例代码
2013/08/20 Javascript
基于JS实现的倒计时程序实例
2015/07/24 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
2016/06/12 Javascript
Vue.JS入门教程之列表渲染
2016/12/01 Javascript
jQuery实现判断控件是否显示的方法
2017/01/11 Javascript
React中的render何时执行过程
2018/04/13 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
2018/09/20 Javascript
Vue组件之高德地图地址选择功能的实例代码
2019/06/21 Javascript
JavaScript的变量声明与声明提前用法实例分析
2019/11/26 Javascript
Python爬虫信息输入及页面的切换方法
2018/05/11 Python
python实现机器学习之多元线性回归
2018/09/06 Python
python3学生名片管理v2.0版
2018/11/29 Python
PyTorch搭建一维线性回归模型(二)
2019/05/22 Python
python 解决tqdm模块不能单行显示的问题
2020/02/19 Python
移动端rem布局的两种实现方法
2018/01/03 HTML / CSS
使用 css3 transform 属性来变换背景图的方法
2019/05/07 HTML / CSS
PHP笔试题
2012/02/22 面试题
进步之星获奖感言
2014/02/22 职场文书
六一节目主持词
2014/04/01 职场文书
2014年客房部工作总结
2014/11/22 职场文书
大学生求职意向书
2015/05/11 职场文书
高质量“欢迎词”
2019/04/03 职场文书
python 爬取华为应用市场评论
2021/05/29 Python
微软PC Health Check电脑健康状况检查应用下载(Win11配置检测工具)
2021/06/26 数码科技
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
2022/04/11 Vue.js