JS getStyle获取最终样式函数代码_javascript技巧
程序员文章站
2022-05-21 10:41:58
...
复制代码 代码如下:
#flower {
width:100px;
font-size:12px;
float:left;
opacity:0.5;
filter:alpha(opacity=50);
}
定义一个id="flower"的div元素 并设置如上样式,我们的目标就是通过javascript来获取样式的最终属性
...
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非行间样式获取函数的实例代码
-
js获取url中指定参数值的示例代码_javascript技巧
-
JS 获取select(多选下拉)中所选值的示例代码_javascript技巧
-
js 数值项目的格式化函数代码_javascript技巧
-
js获取上传文件大小示例代码_javascript技巧
-
js控制不同的时间段显示不同的css样式的实例代码_javascript技巧
-
JS获取dom 对象 ajax操作 读写cookie函数_javascript技巧
-
js css样式操作代码(批量操作)_javascript技巧
-
js调用activeX获取u盘序列号的代码_javascript技巧
-
js获取判断上传文件后缀名的示例代码_javascript技巧