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检测客户端不是firefox则提示下载
Apr 07 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
Jan 15 Javascript
DOM基础教程之事件对象
Jan 20 Javascript
基于js实现投票的实例代码
Aug 04 Javascript
js实现网页图片延时加载 提升网页打开速度
Jan 26 Javascript
js实现横向拖拽导航条功能
Feb 17 Javascript
JS库之Three.js 简易入门教程(详解之一)
Sep 13 Javascript
移动端效果之IndexList详解
Oct 20 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
Apr 04 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
May 21 Javascript
使用vue实现各类弹出框组件
Jul 03 Javascript
p5.js临摹动态图形实现方法详解
Oct 23 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
PHP 抓取网页图片并且另存为的实现代码
2010/03/24 PHP
linux环境apache多端口配置虚拟主机的方法深入介绍
2013/06/09 PHP
php内存缓存实现方法
2015/01/24 PHP
php安装swoole扩展的方法
2015/03/19 PHP
Laravel 5 框架入门(三)
2015/04/09 PHP
详解PHP如何更好的利用PHPstorm的自动提示
2017/08/18 PHP
Js点击弹出下拉菜单效果实例
2013/08/12 Javascript
js如何设置在iframe框架中指定div不显示
2013/12/04 Javascript
使用javascript获取页面名称
2014/12/23 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
2016/09/29 Javascript
使用Nodejs连接mongodb数据库的实现代码
2017/08/21 NodeJs
基于webpack.config.js 参数详解
2018/03/20 Javascript
详解redux异步操作实践
2018/08/15 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
2018/09/01 Javascript
Python实现的下载网页源码功能示例
2017/06/13 Python
python对excel文档去重及求和的实例
2018/04/18 Python
python去除扩展名的实例讲解
2018/04/23 Python
python处理两种分隔符的数据集方法
2018/12/12 Python
使用python3构建文件传输的方法
2019/02/13 Python
pytorch 实现在预训练模型的 input上增减通道
2020/01/06 Python
Python post请求实现代码实例
2020/02/28 Python
python语言中有算法吗
2020/06/16 Python
Rentalcars.com中国:世界上最大的在线汽车租赁服务
2019/08/22 全球购物
实习生体会的自我评价范文
2013/11/28 职场文书
会计学专业学生的求职信范文
2014/01/27 职场文书
《小儿垂钓》教学反思
2014/02/23 职场文书
技校毕业生自荐信范文
2014/03/07 职场文书
水电站项目建议书
2014/05/12 职场文书
社区反邪教工作方案
2014/06/16 职场文书
爱晚亭导游词
2015/02/09 职场文书
2015年中秋节活动总结
2015/03/23 职场文书
职工宿舍管理制度
2015/08/05 职场文书
幼儿园大班教育随笔
2015/08/14 职场文书
六年级语文教学反思
2016/03/03 职场文书
php 文件上传至OSS及删除远程阿里云OSS文件
2021/07/04 PHP
DE1107机评
2022/04/05 无线电