`
liuguofeng
  • 浏览: 449569 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

js中style,currentStyle和getComputedStyle的区别

 
阅读更多
<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
分享到:
评论

相关推荐

    前端学习笔记style,currentStyle,getComputedStyle的用法与区别

    在前端开发中,理解和掌握`style`、`currentStyle`以及`getComputedStyle`的用法与区别至关重要。这些属性和方法允许我们在JavaScript中动态获取和修改元素的样式,从而实现丰富的用户界面交互。 首先,我们要了解...

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

    以下是对`style`、`currentStyle`和`getComputedStyle`之间区别的详细解释: 1. **内联样式(Inline Style)**: 内联样式是最直接的方式,通过在HTML元素的`style`属性中设置CSS样式。这些样式优先级最高,只对该...

    【JavaScript源代码】JavaScript style对象与CurrentStyle对象案例详解.docx

    - 在现代浏览器中推荐使用 `window.getComputedStyle()` 方法来代替 `CurrentStyle` 对象,以确保跨浏览器的兼容性和一致性。 - 在实际项目开发中,根据具体需求选择合适的对象或方法来获取元素的样式信息。

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

    在JavaScript中,获取CSS样式的方法主要有两种:`element.style` 和 `window.getComputedStyle()` 或 `element.currentStyle`(仅IE浏览器)。这些方法可以帮助开发者在运行时动态地读取或修改页面元素的样式。 ...

    JS中的getComputedStyle1

    在JavaScript中,`getComputedStyle`是一个非常重要的方法,它用于获取元素在页面上显示时实际应用的所有CSS属性值。这个方法对于动态获取元素的样式,尤其是那些通过CSS伪类、浏览器默认样式或CSS继承得到的样式,...

    style、 currentStyle、 runtimeStyle区别分析

    在JavaScript中,`style`, `currentStyle`, 和 `runtimeStyle` 是用于操作和查询HTML元素样式的三个重要属性。它们各自有不同的特性和用途,对于理解CSS样式的优先级和动态改变网页元素样式至关重要。 1. **style...

    getComputedStyle与currentStyle获取样式(style/class)

    总的来说,理解和掌握 `getComputedStyle` 和 `currentStyle` 是JavaScript中处理CSS样式的关键,它们能够帮助开发者在不同浏览器环境下准确获取元素的样式信息,从而实现动态的网页效果和交互。在实际开发中,应...

    getComputedStyle_tyle.rar_getComputedSty_getcomputedstyle

    在JavaScript中,`getComputedStyle`是一个非常重要的方法,它用于获取元素在页面上实际呈现的样式,包括浏览器计算后的所有CSS属性值。这个方法对于动态调整元素样式、检测元素状态或者进行复杂的页面布局计算至关...

    JS使用getComputedStyle()方法获取CSS属性值

    在IE中,可以通过element.currentStyle属性来获取元素的当前样式,但与getComputedStyle()不同的是,currentStyle返回的是元素的实时样式,而不仅仅是计算后的样式。在IE9及更高版本中,虽然开始支持...

    用javascript getComputedStyle获取和设置style的原理

    在Web开发中,对网页元素样式的获取和设置是一项非常基础且常见的操作,而JavaScript提供了多种方式来实现这一功能。其中,`getComputedStyle`是一个非常重要的方法,它用于获取元素的所有最终使用的CSS属性值。此...

    javascript获取非行间样式的方法

    JavaScript 是一种广泛应用于网页和网络应用的编程语言,它在前端开发中扮演着重要的角色,尤其是在处理页面动态效果和交互时。本篇文章主要探讨的是如何使用JavaScript获取非行间样式的值,这对于理解和优化网页...

    js计算后的样式

    在前端开发中,“JS计算后的样式”通常指的是通过JavaScript动态获取元素的实际渲染样式的过程。这涉及到如何读取一个元素当前实际显示的样式属性值,而不仅仅是样式表中定义的初始值。 ### 获取计算样式的方法 ##...

    JavaScript样式.pdf

    JavaScript 是一种广泛应用于网页和网络应用的编程语言,尤其在处理网页动态效果和用户交互方面起着关键作用。...在处理浏览器兼容性问题时,了解`currentStyle`和`getComputedStyle`的区别也是必不可少的。

    (currentStyle)javascript为何有时用style得不到已设定的CSS的属性

    然而,在实际应用过程中,开发者可能会遇到一个常见的问题:使用JavaScript的`element.style`属性来获取或修改某个DOM元素的样式时,有时候却无法得到预期的结果。本文将详细探讨这一现象背后的原因,并提供相应的...

    javascript获取隐藏元素(display:none)的高度和宽度的方法

    2. 通过JavaScript的计算样式方法,如obj.currentStyle或document.defaultView.getComputedStyle(),来获取元素的宽度和高度。 3. 获取完尺寸后,需要将元素的display属性和visibility属性恢复原样,以避免元素位置...

    JS中出现的兼容性问题的总结.pdf

    在IE浏览器中,可以使用currentStyle属性,而在Firefox和Chrome中,使用getComputedStyle方法。为了解决兼容性问题,通常通过if...else...结构来判断当前浏览器支持哪种方法。例如,对于获取宽度,可以这样写: `...

    javascript针对DOM的应用分析(三).docx

    而对于外部样式表,通常需要使用`currentStyle`或`getComputedStyle`方法获取样式,但无法直接修改,需切换到内联样式进行修改。 接下来,我们讨论如何用JavaScript动态创建DOM元素。动态创建DOM元素是实现网页动态...

Global site tag (gtag.js) - Google Analytics