getStyle获取最后样式函数代码,获取成分的样式

时间:2019-07-28 09:27来源:2020欧洲杯冠军竞猜官方网站
要想获取HTML元素的计算样式一直都存在很多的兼容问题,各浏览器都会存在一些差异,Firefox、webkit(Chrome,Safari)支持W3C标准的方法:getComputedStyle(),而IE6/7/8不支持标准的方法但是有私有

要想获取HTML元素的计算样式一直都存在很多的兼容问题,各浏览器都会存在一些差异,Firefox、webkit(Chrome,Safari)支持W3C标准的方法:getComputedStyle(),而IE6/7/8不支持标准的方法但是有私有的属性来实现:currentStyle,IE9和Opera两个都支持。有了这2个方法和属性基本上可以满足大多数要求了。

复制代码 代码如下:

复制代码 代码如下:

#flower {
width:100px;
font-size:12px;
float:left;
opacity:0.5;
filter:alpha(opacity=50);
}

var getStyle = function( elem, type ){
 return 'getComputedStyle' in window ? getComputedStyle(elem, null)[type] : elem.currentStyle[type];
};

定义一个id="flower"的div元素 并设置如上样式,我们的目标就是通过javascript来获取样式的最终属性
<div id="flower" >...</div>
getStyle函数:
这里用到了三个原型扩展
String.prototype.capitalize 这个方法是让字符串首字母大写
Array.prototype.contains 判断数组中是否有指定成员
String.prototype.camelize 这个是让"font-size" 字符串转换成 "fontSize" 这样的格式用来获取样式

但是对于自适应的宽度和高度使用currentStyle就没法获取到计算的值,只能返回auto,而getComputedStyle()就可以返回计算的值,解决这个问题有好几种办法。我之前想到的是用clientWidth/clientHeight减去padding的值,这样就可以在不支持标准方法的浏览器中获取到计算的宽度和高度。前几天看到司徒正美采用了另一种办法,使用getBoundingClientRect()方法获取到元素在页面中的位置,然后right减去left就是宽度,bottom减去top就是高度。我对他的代码做了一些小小的修改,最终代码如下:

复制代码 代码如下:

复制代码 代码如下:

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

var getStyle = function( elem, style ){
 return 'getComputedStyle' in window ?
 getComputedStyle( elem, null )[style] :
 function(){
  style = style.replace( /-(w)/g, function( $, $1 ){
   return $1.toUpperCase();
  });

先回顾下基础
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可识别的属性

  var val =  elem.currentStyle[style];

复制代码 代码如下:

  if( val === 'auto' && (style === "width" || style === "height") ){
   var rect =  elem.getBoundingClientRect();
   if( style === "width" ){
    return rect.right - rect.left 'px';
   }else{
    return rect.bottom - rect.top 'px';
   }
  }
  return val;
 }();
};

if(value=="auto" && ["width","height"].contains(styles) && elem.style.display!="none"){
value=elem["offset" styles.capitalize()] "px";
}

// 调用该方法
var test = document.getElementById( 'test' ),
      // 获取计算的宽度
    tWidth = getStyle( test, 'width' );

当 css中定义 元素的宽度为 auto时,并不能获取元素的最终宽度是多少,我们可以用 offsetWidth 和 offsetHeight 获取实际值
当然前提是要在元素为"可见"的状态下!

新的问题,如果元素的宽度或高度使用了em或%的单位,getComputedStyle()返回的值就会自动将em或%换成px的单位,currentStyle就不会,而如果是font-size使用em为单位,在Opera下返回的是0em,Opera真的很恐怖!

复制代码 代码如下:

后来在使用发现中还有一些没想到的兼容问题,今天我对原来的代码进行了优化,并对一些常见的兼容问题进行了处理。

try {
value = elem.filters['DXImageTransform.Microsoft.Alpha'].opacity;
value =value/100;
}catch(e) {
try {
value = elem.filters('alpha').opacity;
} catch(err){}
}

在javascript中“-”(中划线或连字符)代表的是减号,而在CSS中,许多样式属性都有这个符号,如padding-left、font-size等,所以在javascript中如果出现如下的代码就一个错误:

这是获取透明度的方法,ie中定义透明度和其他浏览器不同.需把通过滤镜得到的opacity值/100。返回标准的opacity值(范围0-1);

复制代码 代码如下:

您可能感兴趣的文章:

  • 点击button获取text内容并改变样式的js实现
  • js 获取浏览器版本以此来调整CSS的样式
  • 获取内联和链接中的样式(js代码)
  • js 获取计算后的样式写法及注意事项
  • JS获取页面input控件中所有text控件并追加样式属性
  • 获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
  • js正确获取元素样式详解
  • js获取元素外链样式的方法

elem.style.margin-left = "20px";

正确的写法应该是:

复制代码 代码如下:

elem.style.marginLeft = "20px";

这里需要把CSS的中划线去掉并把原来紧跟在中划线后的字母大写,俗称“驼峰式”写法,不管是使用javascript设置或是获取元素的CSS样式都应该是驼峰式的写法。但是不少对CSS熟悉而又对javascript不太熟悉的新手朋友总是会犯这种低级错误,使用replace的高级用法可以很简单的将CSS属性中的中划线替换成驼峰式的写法。

复制代码 代码如下:

var newProp = prop.replace( /-(w)/g, function( $, $1 ){
    return $1.toUpperCase();
});

对于float,在javascript中属于保留字,在javascript中设置或获取元素的float的值,都有其他的代替写法,在标准浏览器中为cssFloat,而在IE6/7/8中为styleFloat。

如果top、right、bottom、left没有一个显式的值,在获取这些值的时候部分浏览器会返回一个auto,虽然auto这个值是一个合法的CSS属性值,但绝不是我们想要的结果,而应该是0px。

在IE6/7/8中要设置元素的透明度需要用到滤镜、如:filter:alpha(opacity=60),对于标准浏览器直接设置opacity即可,IE9两种写法都支持,我对获取元素的透明度也做了兼容处理,只要使用opacity就可以获取到所有浏览器元素的透明度的值。

2020欧洲杯冠军竞猜官方网站,在IE6/7/8中获取元素的宽度和高度已经在上篇文中介绍过了,这里就不再复述了。还有一个需要注意的地方就是,如果元素的样式是使用style内联的写法,或者是已经使用javascript设置过样式的属性,可以使用下面的方法获取到元素的计算样式:

复制代码 代码如下:

var height = elem.style.height;

这个方法比读取getComputedStyle或currentStyle中的属性值都要快,应该优先使用,当然前提条件就是样式是通过内联的写法设置的(使用javascript设置也是设置内联样式)。优化过的最终代码如下:

复制代码 代码如下:

var getStyle = function( elem, p ){
 var rPos = /^(left|right|top|bottom)$/,
 ecma = "getComputedStyle" in window,
 // 将中划线转换成驼峰式 如:padding-left => paddingLeft
 p = p.replace( /-(w)/g, function( $, $1 ){
 return $1.toUpperCase();
 });
 // 对float进行处理  
 p = p === "float" ? ( ecma ? "cssFloat" : "styleFloat" ) : p;

 return !!elem.style[p] ?
 elem.style[p] :
 ecma ?
 function(){
 var val = getComputedStyle( elem, null )[p];
 // 处理top、right、bottom、left为auto的情况
 if( rPos.test(p) && val === "auto" ){
 return "0px";
 }
 return val;
 }() :
 function(){
 var <a href="; val = elem.currentStyle[p];
 // 获取元素在IE6/7/8中的宽度和高度
  if( (p === "width" || p === "height") && val === "auto" ){
  var rect = elem.getBoundingClientRect();    
  return ( p === "width" ? rect.right - rect.left : rect.bottom - rect.top ) "px";
  }
 // 获取元素在IE6/7/8中的透明度
  if( p === "opacity" ){
  var filter = elem.currentStyle.filter;
  if( /opacity/.test(filter) ){
   val = filter.match( /d / )[0] / 100;
  return (val === 1 || val === 0) ? val.toFixed(0) : val.toFixed(1);
  }
  else if( val === undefined ){
  return "1";
  }
  }
  // 处理top、right、bottom、left为auto的情况
  if( rPos.test(p) && val === "auto" ){
  return "0px";
  }
  return val;
 }();
};

下面是调用示例:

复制代码 代码如下:

<style>
.box{
 width:500px;
 height:200px;
 background:#000;
 filter:alpha(opacity=60);
 opacity:0.6;
}
</style>

<div id="box"></div>

<script>
var box = document.getElementById( "box" );

alert( getStyle(box, "width") ); // "500px"
alert( getStyle(box, "background-color") ); // "rgb(0, 0, 0)" / "#000"
alert( getStyle(box, "opacity") ); // "0.6"
alert( getStyle(box, "float") ); // "none"
</script>

您可能感兴趣的文章:

  • javascript获取设置div的高度和宽度兼容任何浏览器
  • javascript使用百度地图api和html5特性获取浏览器位置
  • javascript获取浏览器类型和版本的方法(js获取浏览器版本)
  • javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
  • JavaScript获取网页、浏览器、屏幕高度和宽度汇总
  • javascript 获取浏览器版本
  • javascript实现获取浏览器版本、操作系统类型
  • JavaScript跨浏览器获取页面中相同class节点的方法
  • JavaScript获取各大浏览器信息图示

编辑:2020欧洲杯冠军竞猜官方网站 本文来源:getStyle获取最后样式函数代码,获取成分的样式

关键词: 欧洲杯竞猜