你的位置:首页 > Java教程

[Java教程]style currentStyle getComputedStyle的区别和用法


先介绍下层叠样式表的三种形式:

1.内联样式,在html标签中style属性设置。

<p >内联样式</p>

2.嵌入样式,通过在head标签设置style标签添加样式。

<style type="text/css">  .stuff{color:#f90;}</style>

3.外部样式,通过link标签引入外部样式

<link type="text/css" rel="stylesheet" href="path/style.css" />/*style.css*/@charset "utf-8";.stuff{color:#f90;}

进入正题。

style属性获取样式值,使用方法:obj.style.attr

style只能获取元素的内联样式,内部样式和外部样式使用style都获取不到。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title>  <style type="text/css">    #stuff{width:300px;}  </style>  <link rel="stylesheet" href="a.css"></head><body>  <div id="stuff">Hello world</div>  <script type="text/javascript">    var stuff = document.getElementById('stuff');    //如果只设置外部样式和内嵌样式获取的是空值    alert(stuff.style.width);//400px</script></body></html>//外部样式@charset "utf-8";#stuff{width:100px;}

currentStyle和getComputedStyle方法既可以获取内联样式,也可以获取外部样式和内嵌样式的值。获取的顺序是内联样式->外部样式->内嵌样式。他们之间的区别是currentStyle只适用于IE浏览器,getComputedStyle适用于Firefox、Opera、Safari、Chrome浏览器。使用方法:

//currentStylevar style = obj.currentStyle['attr']或obj.currentStyle.attr//getComputedStylevar style = getComputedStyle(obj, pseudoElt)['attr']或getComputedStyle(obj, pseudoElt).attr其中,pseudoElt表示如:after, :before之类的伪类元素,如果不用伪类的话设置为null即可。//为了浏览器的兼容性,可以封装成一个函数使用function getStyle(obj, attr){  if(obj.currentStyle){    return obj.currentStyle['attr'];  }else{    return getComputedStyle(obj, null)['attr'];  }}

getComputedStyle、currentStyle和style的区别是:

getComputedStyle和currentStyle只能获取属性值,无法设置属性。如果想设置属性值,可是使用ob.style.attr.