(转)style/getComputerStyle/currentStyle

http://www.jb51.net/article/34863.htm



大家都知道,用document.getElementById(‘element‘).style.xxx可以获取元素的样式信息,可是它获取的只是DOM元素style属性里的样式规则,对于通过class属性引用的外部样式表,就拿不到我们要的信息了。

DOM标准里有个全局方法getComputedStyle,可以获取到当前对象样式规则信息,如:getComputedStyle(obj,null).paddingLeft,就能获取到对象的左内边距。但是事情还没完,万恶的IE不支持此方法,它有自己的一个实现方式,那就是currentStyle,不同于全局方法getComputedStyle,它是作为DOM元素属性存在的,如:obj.currentStyle.paddingLeft,在IE中就获取到对象的左内边距了,兼容性的写法如下:

复制代码代码如下:

return window.getComputedStyle ? window.getComputedStyle(obj,null).paddingLeft : obj.currentStyle.paddingLeft;

这样,就能在IE及FF中返回对象的当前样式信息了。

特别注意一点:如果要获取当前对象的颜色信息,IE返回的是16进制的‘#ffffff‘,而FF返回的是rgb(255,255,255)

用js的style属性可以获得html标签的样式,但是不能获取非行间样式。那么怎么用js获取css的非行间样式呢?在IE下可以用currentStyle,而在火狐下面我们需要用到getComputedStyle。下面是一个小示例:

复制代码代码如下:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>js用currentStyle和getComputedStyle获取css样式</title> 
<style type="text/css"> 
#div1{width:100px; height:100px; background:red;} 
</style> 
<script type="text/javascript"> 
function getStyle(obj, attr) 

if(obj.currentStyle) 

return obj.currentStyle[attr]; 

else 

return getComputedStyle(obj,false)[attr]; 


window.onload=function() 

var oDiv=document.getElementById(‘div1‘); 
alert(getStyle(oDiv,‘width‘)) 

</script> 
</head> 
<body> 
<div id="div1"></div> 
</body> 
</html>

时间: 2024-10-27 07:26:53

(转)style/getComputerStyle/currentStyle的相关文章

style、currentStyle、getComputedStyle区别介绍

样式表有三种方式 内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效. 内部样式(internal Style Sheet):是写在HTML的里面的,内部样式只对所在的网页有效. 外部样式表(External Style Sheet):指引入以.css为后缀的CSS文件,.最常用的是style属性,即在JavaScript中,通过document.getElementById(id).style.XXX就可以获取到 XXX的值,但意外的是,这样做只能取到通过

style、currentStyle、getComputedStyle

       在写js时常会遇到一些改变当前样式的问题,来达到改变显示效果.完成一些动画等等(如:display),但在获取时往往遇到问题(以前常用document.getElementById("xx").style[""]),因为这样只能获取内嵌属性的值,而不会获取样式表中的值,内外部样式表设置的css样式不会改变style属性的值(在标签中未写的style里包含的会取默认值).下面先来了解一下样式的定义 样式表的三种方式 A.内嵌样式(inline Style

JavaScript强化教程——style、currentStyle、getComputedStyle区别介绍

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 —— style.currentStyle.getComputedStyle区别介绍 style.currentStyle.getComputedStyle区别介绍 样式表有三种方式 内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效. 内部样式(internal Style Sheet):是写在HTML的里面的,内部样式只对所在的网页有效. 外部样式表(Extern

style、currentStyle、getComputeStylel的使用

(1)js中使用obj.style的用法,是为了获得内联样式,即style属性中的值. 如果想获取obj.style.display,但内联样式表中没有定义display,那么将返回一个空的字符串. (2)使用obj.currentStyle则是为了获得外部(即通过<link>引入)和内部(即<style>中定义)的样式表中的值. currentStyle 对象反映了样式表中的样式优先顺序.在 HTML 中此顺序为:内嵌样式.样式表规则.HTML 标签属性.HTML 标签的内部定义

获取css属性的style getComputedStyle currentStyle三种方法的区别总结

css中有三种样式,分别是内嵌样式 内部样式 外部样式表 1.style 语法:element.style.xxx 这种只能取得内嵌样式的属性,获取样式能读能写 2.currentStyle 语法:element.currentStyle[xxx] 可以取得内部和外部样式,但是只兼容ie浏览器,获取的样式只能读 实例:document.creatElement('div').currentStyle['width']  取得元素的宽度 3.getComputedStyle 语法: window.

style、 currentStyle、 runtimeStyle、getComputedStyle区别分析

1.obj.style只能获得内嵌样式(inline Style)就是写在Tag里面的,他访问不到那些链接的外部css和在head中用<style>声明的style. 所以必须认识到在那些使用外部Css文件的页面中,如果用style赋值,如obj.style=“color:red”;显然效果是正确的,其中的奥秘确是只是在该对象的tag上多添加了一个style属性,按照由小到大的优先级呈现罢了. 2.obj.currentStyle就强大多了,他能够获取关于这个节点所有位置的style,但是他也

css样式获取,style,currentStyle,getComputedStyle

对于css样式的获取问题,对于行内样式,我们可以用style来获取,但是对于内嵌和外部样式的话,style就心有余和力不足了.它是获取不到这些样式的 此时就只有currentStyle和getComputedStyle上阵了. currentStyle是只兼容各种IE的,但是不兼容火狐,谷歌的,而getComputeStyle的话是可以兼容火狐,谷歌,和IE9+的.(以下测试均在谷歌和IE下) 对于行内样式: <!DOCTYPE html> <html lang="en&quo

style currentStyle getComputedStyle的区别和用法

先介绍下层叠样式表的三种形式: 1.内联样式,在html标签中style属性设置. <p style="color:#f90">内联样式</p> 2.嵌入样式,通过在head标签设置style标签添加样式. <style type="text/css"> .stuff{color:#f90;} </style> 3.外部样式,通过link标签引入外部样式 <link type="text/css&quo

currentStyle和getComputedStyle的兼容写法

今天学习javascript的时候,教程中介绍了一种简单实现jQuery 中css()方法的写法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #div{ width: 200px; height: 200px; background: re