js获取非内部取样式表中定义的属性值

快乐打工仔 分类:实例代码

js获取非内部取样式表中定义的属性值属于前端实例代码,有关更多实例代码大家可以查看

在学习js的过程中,通常最先掌握的获取元素样式属性值是使用以下方式:

element.style

看一段相关代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css"> 
div{ 
  height:100px; 
  margin-bottom:10px; 
  background-color:green; 
} 
#bottom{ 
  width:100px; 
} 
</style> 
<script type="text/javascript"> 
window.onload=function(){ 
  alert(document.getElementById("top").style.width); 
  alert(document.getElementById("bottom").style.width); 
} 
</script> 
</head> 
<body> 
  <div id="top" style="width:100px;"></div> 
  <div id="bottom"></div> 
</body> 
</html>

从以上代码的表现可以看出,使用element.style方式可以获取使用style标签在标签内部定义的样式属性值,却不能够获取其他方式定义的样式属性值,所以要获取内联样式表或者外部样式表定义的属性值,则需要考虑使用其他方式了,下面就简单介绍一下,由于存在浏览器兼容性问题,所以就分组介绍一下:

IE浏览器下:

在IE8或者更低版本的IE浏览器下要使用以下方式:

element.currentStyle

此方式可以获取当前对象的所有最终样式属性值。它能够感知指定对象中的样式的优先级。

element.style与element.currentStyle的区别:

1.element.style是可读写的,而element.currentStyle是只读的。

2.element.style仅能够获取style属性定义的样式属性值,而element.currentStyle可以获取对象的最终属性值。

3.element.style兼容所有浏览器,而element.currentStyle仅被IE8或者IE8以下浏览器支持。

标准浏览器下:

W3C给予了一种标准方式:

window.getComputedStyle(element, pseudoElt)

以上方式可以获取指定对象的CSS属性对象。它具有两个参数:

1.element:必需,是要获取CSS属性的对象。

2.pseudoElt:可选,一个伪元素字符串(例如:after),在比较老旧的浏览器中此参数为必需,但是现在一般可选也没有问题。

在很多代码中也有document.defaultView.getComputedStyle()形式,不过它和window.getComputedStyle()的区别可以忽略不计,因为在当前的浏览器中一般没有不会有任何问题。

element.currentStyle与window.getComputedStyle()的区别:

1.IE8和IE之下浏览器不支持window.getComputedStyle(),其他标准浏览器都支持,只有IE浏览器支持element.currentStyle。

2.element.currentStyle不支持伪类样式获取,window.getComputedStyle()支持。

那么可以整合为一个兼容所有浏览器的代码:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css"> 
div{ 
  height:100px; 
  margin-bottom:10px; 
  background-color:green; 
} 
#bottom{ 
  width:100px; 
} 
</style> 
<script type="text/javascript"> 
window.onload=function(){ 
  function GetCurrentStyle(obj, prop){       
    if(obj.currentStyle){          
      return obj.currentStyle[prop];       
    }        
    else if(window.getComputedStyle){                 
      return window.getComputedStyle(obj,null)[prop];       
    }        
    return null;     
  }    
  var bottom=document.getElementById("bottom"); 
  alert(GetCurrentStyle(bottom,"width")) 
} 
</script> 
</head> 
<body> 
  <div id="top" style="width:100px;"></div> 
  <div id="bottom"></div> 
</body> 
</html>

以上代码可以兼容各大浏览器,能够获取到bottom元素的width属性值。

代码注释:

1.if(obj.currentStyle)判断浏览器是否支持currentStyle。

2.obj.currentStyle[prop]使用键/值方式访问返回的CSS属性对象中指定属性的值。

3.if(window.getComputedStyle)判断是否支持getComputedStyle。

js获取非内部取样式表中定义的属性值,这样的场景在实际项目中还是用的比较多的,关于js获取非内部取样式表中定义的属性值就介绍到这了。

回复

我来回复
  • 暂无回复内容