JS getStyle获取最终样式函数代码
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JS getStyle获取最终样式函数代码，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3192字，纯文字阅读大概需要5分钟。
内容图文
代码如下:
#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);
内容总结
以上是互联网集市为您收集整理的JS getStyle获取最终样式函数代码全部内容，希望文章能够帮你解决JS getStyle获取最终样式函数代码所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】