得到成分的体裁,获取内联和链接中的样式

复制代码 代码如下:

要想获取HTML元素的测算样式平昔都设有比相当多的包容难题,各浏览器都会存在部分区别,Firefox、webkit(Chrome,Safari)帮助W3C标准的方法:getComputedStyle(),而IE6/7/8不支持规范的办法但是有私人商品房的质量来促成:currentStyle,IE9和Opera七个都援救。有了那2个办法和天性基本上能够满足大很多需要了。

要想赢得HTML成分的总括样式平昔都留存非常多的包容难点,各浏览器都会存在一些不同,Firefox、webkit(Chrome,Safari)援助W3C标准的点子:getComputedStyle(),而IE6/7/8不支持规范的秘诀不过有个体的属性来落到实处:currentStyle,IE9和Opera四个都协理。有了那2个艺术和性质基本上能够满意大相当多需求了。

var head = document.getElementById( “box” );
// alert( head.style.background )
// alert( head.style.cssFloat || head.style.styleFloat ) //
获取float不一样
// head.style.fontSize = “30px”
head.style.color = “#f00”;
// (typeof head.style.cssFloat != “undefined” ) ? head.style.cssFloat =
“right” : head.style.styleFloat = “right” 跨浏览器设置float
// var style = ( window.getComputedStyle ? window.getComputedStyle(
head,null ) : null ) || head.currentStyle; 跨浏览器获取总结之后的体裁
// alert( style.fontSize )
// 这样能够获得到内联和链接
// 因为总计之后的体裁会驻留在浏览器的计量样式里面 所以就足以获取获得

复制代码 代码如下:

复制代码 代码如下:

您或然感兴趣的稿子:

  • js获取内联样式的法子
  • javascript
    读取内联之外的体制(style、currentStyle、getComputedStyle不同介绍)
  • 有关javascript获取内联样式与嵌入式样式的实例

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

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

只是对于自适应的宽度和中度使用currentStyle就无语获取到计算的值,只可以回到auto,而getComputedStyle()就能够回去计算的值,化解那一个标题有某个种格局。小编事先想到的是用clientWidth/clientHeight减去padding的值,这样就足以在不帮助规范方法的浏览器中获得到总括的上涨的幅度和冲天。今日看到司徒正美采纳了另一种方法,使用getBoundingClientRect()方法获得到成分在页面中的地方,然后right减去left正是升幅,bottom减去top正是可观。作者对他的代码做了有的细小修改,最后代码如下:

可是对于自适应的幅度和可观使用currentStyle就无语获取到计算的值,只可以回到auto,而getComputedStyle()就能够再次回到总结的值,化解那些难题有少数种办法。笔者事先想到的是用clientWidth/clientHeight减去padding的值,那样就足以在不帮衬标准措施的浏览器中获得到计算的增加率和惊人。前几日看到司徒正美选用了另一种艺术,使用getBoundingClientRect()方法得到到成分在页面中的位置,然后right减去left就是开间,bottom减去top就是中度。笔者对他的代码做了一部分纤维修改,最后代码如下:

复制代码 代码如下:

复制代码 代码如下:

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

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

  var val =  elem.currentStyle[style];

  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( 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;
 }();
};

// 调用该措施
var test = document.getElementById( ‘test’ ),
      // 获取总括的大幅
    tWidth = getStyle( test, ‘width’ );

// 调用该措施
var test = document.getElementById( ‘test’ ),
      // 获取总结的增进率
    tWidth = getStyle( test, ‘width’ );

新的难点,假设成分的肥瘦或可观使用了em或%的单位,getComputedStyle()再次来到的值就能活动将em或%换到px的单位,currentStyle就不会,而要是是font-size使用em为单位,在Opera下回到的是0em,Opera真的很恐惧!

新的主题材料,假使成分的幅度或可观使用了em或%的单位,getComputedStyle()重临的值就能够自行将em或%换到px的单位,currentStyle就不会,而要是是font-size使用em为单位,在Opera下再次回到的是0em,Opera真的很恐惧!

后来在动用发掘中还会有局地没悟出的包容难点,昨印度人对本来的代码举行了优化,并对一部分广大的包容难题进行了处理。

新生在行使开掘中还应该有一对没悟出的包容难题,先天本人对原先的代码进行了优化,并对一些普遍的包容难题实行了拍卖。

在javascript中“-”(中划线或连字符)代表的是减号,而在CSS中,好些个体裁属性都有那一个符号,如padding-left、font-size等,所以在javascript中一旦出现如下的代码就三个荒唐:

在javascript中“-”(中划线或连字符)代表的是减号,而在CSS中,多数体制属性都有那个标志,如padding-left、font-size等,所以在javascript中借使出现如下的代码就一个荒谬:

复制代码 代码如下:

复制代码 代码如下:

elem.style.margin-left = “20px”;

elem.style.margin-left = “20px”;

没有错的写法应该是:

不错的写法应该是:

复制代码 代码如下:

复制代码 代码如下:

elem.style.marginLeft = “20px”;

elem.style.marginLeft = “20px”;

此处须要把CSS的中划线去掉并把原先紧跟在中划线后的假名大写,俗称“驼峰式”写法,不管是选用javascript设置或是获取成分的CSS样式都应当是驼峰式的写法。不过过多对CSS熟悉而又对javascript不太纯熟的新手朋友总是会犯这种起码错误,使用replace的高级用法能够很简短的将CSS属性中的中划线替换来驼峰式的写法。

此地须要把CSS的中划线去掉并把本来紧跟在中划线后的字母大写,俗称“驼峰式”写法,不管是行使javascript设置或是获取成分的CSS样式都应有是驼峰式的写法。不过相当多对CSS熟习而又对javascript不太熟稔的新手朋友接二连三会犯这种低档错误,使用replace的尖端用法能够极粗略的将CSS属性中的中划线替换来驼峰式的写法。

复制代码 代码如下:

复制代码 代码如下:

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

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

对于float,在javascript中属于保留字,在javascript中安装或获得成分的float的值,都有别的的代表写法,在正规浏览器中为cssFloat,而在IE6/7/第88中学为styleFloat。

对此float,在javascript中属于保留字,在javascript中装置或获得元素的float的值,都有任何的代替写法,在正规浏览器中为cssFloat,而在IE6/7/第88中学为styleFloat。

假如top、right、bottom、left未有三个显式的值,在获得这个值的时候有的浏览器会回到三个auto,固然auto那个值是一个官方的CSS属性值,但决不是大家想要的结果,而应该是0px。

借使top、right、bottom、left未有一个显式的值,在赢得这个值的时候有的浏览器会重回一个auto,即便auto那几个值是一个官方的CSS属性值,但不假设大家想要的结果,而应该是0px。

在IE6/7/第88中学要设置成分的折射率须要使用滤镜、如:filter:阿尔法(opacity=60),对于标准浏览器直接设置opacity就可以,IE9两种写法都补助,小编对获得成分的折射率也做了特别处理,只要使用opacity就能够赢获得持有浏览器成分的反射率的值。

在IE6/7/第88中学要安装成分的折射率须求选取滤镜、如:filter:阿尔法(opacity=60),对于专门的学问浏览器直接设置opacity就可以,IE9三种写法都帮助,小编对获得成分的发光度也做了同盟管理,只要选取opacity就足以拿走到具有浏览器成分的发光度的值。

在IE6/7/第88中学获得成分的上涨的幅度和惊人已经在上篇文中介绍过了,这里就不再复述了。还也可能有贰个内需专注的地方正是,就算成分的体裁是选取style内联的写法,或然是曾经应用javascript设置过样式的特性,能够利用上边包车型大巴法子赢得到成分的估摸样式:

在IE6/7/第88中学获得元素的小幅和惊人已经在上篇文中介绍过了,这里就不再复述了。还应该有四个内需专注的地点正是,假诺成分的体裁是运用style内联的写法,或许是曾经运用javascript设置过样式的品质,能够动用下边包车型地铁办法获得到成分的总结样式:

复制代码 代码如下:

复制代码 代码如下:

var height = elem.style.height;

var height = elem.style.height;

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

这一个方法比读取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;

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/第88中学的宽度和惊人
  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/第88中学的光滑度
  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;
 }();
};

 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/第88中学的反射率
  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>

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

<div id=”box”></div>

<div id=”box”></div>

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

<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>

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得到各大浏览器音信图示

Post Author: admin

发表评论

电子邮件地址不会被公开。 必填项已用*标注