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 相关文章推荐
JS拖动技术 关于setCapture使用
Dec 09 Javascript
Javascript学习笔记 delete运算符
Sep 13 Javascript
A标签中通过href和onclick传递的this对象实现思路
Apr 19 Javascript
JavaScript 封装一个tab效果源码分享
Sep 15 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
Sep 18 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
Jun 06 Javascript
JavaScript实现简单的拖动效果
Jul 02 Javascript
vue实现ToDoList简单实例
Feb 07 Javascript
小程序云开发如何实现图片上传及发表文字
May 17 Javascript
微信小程序之 catalog 切换实现解析
Sep 12 Javascript
JS控制只能输入数字并且最多允许小数点两位
Nov 24 Javascript
vue移动端写的拖拽功能示例代码
Sep 09 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
Destoon模板制作简明教程
2014/06/20 PHP
php去掉文件前几行的方法
2015/07/29 PHP
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
2011/12/20 Javascript
js的image onload事件使用遇到的问题
2014/07/15 Javascript
通过设置CSS中的position属性来固定层的位置
2015/12/14 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
2016/02/12 Javascript
JS onkeypress兼容性写法详解
2016/04/27 Javascript
轻松掌握JavaScript享元模式
2016/08/27 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
2018/01/17 Javascript
js实时监控文本框输入字数的实例代码
2018/01/18 Javascript
jQuery选择器之基本选择器用法实例分析
2019/02/19 jQuery
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
[01:46]DOTA2上海特锦赛小组赛英文解说KotlGuy采访
2016/02/27 DOTA
Python实现简单的四则运算计算器
2016/11/02 Python
Python编程修改MP3文件名称的方法
2017/04/19 Python
Python中Scrapy爬虫图片处理详解
2017/11/29 Python
详解Numpy中的数组拼接、合并操作(concatenate, append, stack, hstack, vstack, r_, c_等)
2019/05/27 Python
python批量下载抖音视频
2019/06/17 Python
python3中类的继承以及self和super的区别详解
2019/06/26 Python
python粘包问题及socket套接字编程详解
2019/06/29 Python
python读取.mat文件的数据及实例代码
2019/07/12 Python
通过 Django Pagination 实现简单分页功能
2019/11/11 Python
opencv python如何实现图像二值化
2020/02/03 Python
远程Wi-Fi宠物监控相机:Petcube
2017/04/26 全球购物
英国最受欢迎的平价女士时装零售商:Roman Originals
2019/11/02 全球购物
linux面试题参考答案(7)
2012/10/29 面试题
工作迟到检讨书
2014/02/21 职场文书
教师考核材料
2014/05/21 职场文书
初中生庆国庆演讲稿范文2014
2014/09/25 职场文书
夫妻双方自愿离婚协议书
2014/10/24 职场文书
2014年个人工作总结模板
2014/12/15 职场文书
大学生操行评语大全
2014/12/31 职场文书
小学班主任自我评价
2015/03/11 职场文书
采购员岗位职责范本
2015/04/07 职场文书
高中班长竞选稿
2015/11/20 职场文书
python中Pyqt5使用Qlabel标签播放视频
2022/04/22 Python