style和getComputedStyle(ff)和currentStyle

obj.style:这个方法只能JS只能获取写在html标签中的写在style属性中的值(style=”…”),而无法获取定义在<style type="text/css">里面的属性。

IE中使用的是obj.currentStyle方法,而FF是用的是getComputedStyle 方法

<style type=”text/css”>
<!–
.ss{color:#cdcdcd;}
–>
</style>
</head>

<body>
<div id=”css88″ class=”ss” style=”width:200px; height:200px; background:#333333″>JS获取CSS属性值</div>
<script type=”text/javascript”>
alert(document.getElementById(“css88″).style.width);//200px
alert(document.getElementById(“css88″).style.color);//空白
</script>
</body>

#myDiv {
background-color:blue;
width:100px;
height:200px;
}
</style>
<body>
<div id ="myDiv" style=" border:1px solid black"></div>
<script>
var myDiv = document.getElementById("myDiv");
var computedStyle = document.defaultView.getComputedStyle(myDiv, null);
alert(computedStyle.backgroundColor); //"red"
alert(computedStyle.width); //"100px"
alert(computedStyle.height); //"200px"
alert(computedStyle.border); //在某些浏览器中是“1px solid black”
</script

<span style="font-family:Arial;font-size:14px;">var myDiv = document.getElementById("myDiv");
var computedStyle = myDiv.currentStyle;
alert(computedStyle.backgroundColor); //"red"
alert(computedStyle.width); //"100px"
alert(computedStyle.height); //"200px"
alert(computedStyle.border); //undefined</span>

时间: 2024-10-28 13:29:48

style和getComputedStyle(ff)和currentStyle的相关文章

获取css样式,style、getComputedStyle及currentStyle的区别

样式表有三种: 内嵌样式:<div id="box" style="color:red">box</div>,style写在html中的为内嵌样式: 内联样式: <style> #box{    font-size: 25px;    background-color: #ccc; } </style> 在html页中直接写入<style></style>的为内联样式: 外部样式:<lin

js中style,currentStyle和getComputedStyle的区别

js中style,currentStyle和getComputedStyle的区别 MarysMa 在js中用xx.style.marginTop是无法获取写在css或<sytle>标签中的margin-top之类的样式值(包括width,height等). 这就是style属性的限制: style :只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.(内联样式: body中标签里用style直接写的样式.) currentStyle :可以弥补style的不足,但是只适用

css样式获取,style,currentStyle,getComputedStyle

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

Js获取元素样式值(getComputedStyle&amp;currentStyle)兼容性解决方案

因为:style(document.getElementById(id).style.XXX)只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的. 一般js获取内部样式和外部样式使用getComputedStyle,以及currentStyle. IE下获取元素的实际属性值使用currentStyle属性,getComputedStyle同currentStyle作用相同,但是适用于FF.opera.safari.chrome.但用这种方法在IE7,IE8,IE9获取元素属性值

style、currentStyle、getComputeStylel的使用

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

函数语法:currentStyle、getComputedStyle兼容判断

var oDiv = document.getElementById('aa'); if(oDiv.currentStyle){ var style = oDiv.currentStyle; alert('ie:'+style.width) } else if(window.getComputedStyle) { var style = window.getComputedStyle(oDiv); alert('谷歌:'+style.width) } 原文地址:https://www.cnblo

获取元素CSS值之getComputedStyle方法熟悉

一.碎碎念~前言 我们都用过jQuery的CSS()方法,其底层运作就应用了getComputedStyle以及getPropertyValue方法. 对于那些只想混口饭吃的人来讲,晓得CSS()如何使用就足够了.对于希望在JS道路上越走越远的来人说,简单了解一些JS库底层实现对自己的学习很有帮助.可能谈不上信手拈来的使用,至少对创造一些创意新颖的新技术拓宽了思路. jQuery为何受欢迎,其中原因之一就是方法名称比较短.好比打架一样,块头大的潜意识认为厉害,就不由得心生畏惧,退避三舍:小个子(

解析JQuery中css()方法,获取元素CSS值之getComputedStyle方法(转载,写的很好)

一.碎碎念~前言 我们都用过jQuery的CSS()方法,其底层运作就应用了getComputedStyle以及getPropertyValue方法. 对于那些只想混口饭吃的人来讲,晓得CSS()如何使用就足够了.对于希望在JS道路上越走越远的来人说,简单了解一些JS库底层实现对自己的学习很有帮助.可能谈不上信手拈来的使用,至少对创造一些创意新颖的新技术拓宽了思路. jQuery为何受欢迎,其中原因之一就是方法名称比较短.好比打架一样,块头大的潜意识认为厉害,就不由得心生畏惧,退避三舍:小个子(

获取元素的css属性之getComputedStyle

习惯了用jQuery的css()的方法获取元素的css属性,突然不用jQquery了,当要获得元素的css时候,我瞬间停顿了一下,咦?咋获取元素的css值?比如获取元素的width.是这样么?document.getElementById("id").style.width? 一.getComputedStyle getComputedStyle,见名之意,就是获取元素计算之后的样式属性值,也就是获取当前元素所有最终使用的CSS属性值.返回的是一个CSS样式声明对象([object C