`

js中style,currentStyle和getComputedStyle的区别

    博客分类:
  • js
 
阅读更多
<style>
body{margin:0 auto;text-align:center;}
div{position:relative;left:10px;}
</style>
<div id="pic1">
<img src="http://pic1.xihuan.me/edr/196__/t02362982432fa1b14e.jpg">
</div>
<script>
var dom1 = document.getElementByIdx_x('pic1');
console.log(dom1.style.left);
</script>


控制台中显示为空。

查询了相关资料发现问题如下:

style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的。
currentStyle可以弥补style的不足,但是只适用于IE
getComputedStyle同currentStyle作用相同,但是适用于FF、opera、safari、chrome

写了个getStyle的自定义函数,来兼容ie和其他浏览器,使用getStyle来获取页面中元素的样式,问题解决。
getElementStyle: function(el,attr){
//获取el当前的attr样式,解决ie问题
return el.currentStyle?el.currentStyle[attr]:getComputedStyle(el,null)[attr];
}
获取后返回10px。

注意:
currentStyle和getComputedStyle只能用于获取页面元素的样式,不能用来设置相关值。
如果要设置相应值,应使用style。
分享到:
评论

相关推荐

    javascript 读取内联之外的样式(style、currentStyle、getComputedStyle区别介绍)

    样式表有三种方式 内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效。 内部样式(internal Style Sheet):是写在HTML的&lt;head&gt;&lt;/head&gt;里面的,内部样式只对所在的网页有效。 ...

    JS获取CSS样式(style/getComputedStyle/currentStyle)

    CSS的样式分为三类: ...getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式对象([object CSSStyleDeclaration]) currentStyle是IE浏览器的一个属性,返回的是CSS样式对象 el

    javascript 获取元素样式必杀技

    Javascript获取CSS属性值方法:getComputedStyle和currentStyle 1 .对于元素的内联CSS样式(&lt;div xss=removed&gt;hello),可以直接使用element.style.color来直接获取css属性的值; 2. 但是对于外部定义的css样式使用...

    原生javascript获取元素样式属性值的方法

    先来看currentStyle方法, 此对象ie专属, 代表了在全局样式表、内嵌样式和 HTML 标签属性中指定的对象格式和样式. IE下通过它, 就可以获取元素的Css属性值. 而针对其他标准浏览器, W3C也提供了一个方法...

    js获取css的各种样式并且设置他们的方法

    js原生获取css样式,并且设置,看似简单,其实并不简单,我们平时用的ele.style.样式,只能获取内嵌的样式,但是我们写的样式基本都在style属性里面; 这里我们就需要: 下面这个代码主要是设置为了兼容IE这孙子; function...

    Jquery作者John Resig自己封装的javascript 常用函数

    function getStyle(elem,name){ if(elem.style[name]){ return elem.style[name]; }else if(elem.currentStyle){ return elem.currentStyle[name]; }else if(document.defaultView&&document.defaultView....

    animate.js

    window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0; } //动画函数 obj---要执行动画的对象 json---要执行到的目标的参数对象 fn为执行完成后的回调函数(可以再次调用此方法按照...

    js CSS操作方法集合

    //获取元素的真实的,最终的CSS样式属性值的函数 function getStyle(elem,name){ if(elem.style[name]){ return elem.style[name]; }else if(elem.currentStyle){ return elem.currentStyle[name]; }else if...

    JavaScript Table行定位效果

    程序中为了更美观会自动去掉新table上面和下面的边框,包括frame和style的: Code if(this._oTable.border &gt; 0){ switch (this._oTable.frame) { case "above" : case "below" : case "hsides" : this._nTable...

    JS获取IMG图片高宽的简单实例

    前段时间在LJW写的touchslider.js轮播代码里添加自适应屏幕大小的功能时,遇到一个问题。不管用什么样的方法都无法获取到IMG标签的高宽,最后只有给图片定一...getComputedStyle 与 currentStyle; obj.naturalWidth(nat

    js获取页面引用的css样式表中的属性值方法(推荐)

    如下所示: function getStyle(node, property){ if (node.style[property]) { return node.style[property];... else if (document.defaultView && document.defaultView.getComputedStyle) { var

    javascript操作css属性

    obj.currentStyle[attribute] : document.defaultView.getComputedStyle(obj, false)[attribute];} 还有一种可以获取写在html中的style属性的 代码如下:document.getElementById(“elementId”).s

    用js模拟JQuery的show与hide动画函数代码

    代码如下: //根据ID返回dom元素 var $ = function(id){return document.getElementById... } //ff else { var style = document.defaultView.getComputedStyle(obj,null); return style[name]; } } Hide函数: 代码如

    eclipse-testng 离线包下载

    ('main.js')}" format="text"&gt; &lt;![CDATA[ var selectedTestCaseLink; function clearAllSelections() { if (selectedTestCaseLink != null) { selectedTestCaseLink.className = "testCaseLink"; } ...

    my97日历控件

    _.currentStyle[$]:document.defaultView.getComputedStyle(_,false)[$]}function P(_,$){if(_)if($!=null)_.style.display=$;else return R(_,"display")}function I(G,_){var D=G.el?G.el.nodeName:"INPUT";if(_||...

Global site tag (gtag.js) - Google Analytics