`
zhanying
  • 浏览: 8764 次
社区版块
存档分类
最新评论

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

阅读更多
本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 —— style、currentStyle、getComputedStyle区别介绍
style、currentStyle、getComputedStyle区别介绍
样式表有三种方式
内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效。

内部样式(internal Style Sheet):是写在HTML的里面的,内部样式只对所在的网页有效。

外部样式表(External Style Sheet):如果很多网页需要用到同样的样式(Styles),将样式(Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件。 最常用的是style属性,在JavaScript中,通过document.getElementById(id).style.XXX就可以获取到XXX的值,但意外的是,这样做只能取到通过内嵌方式设置的样式值,即style属性里面设置的值。



解决方案:引入currentStyle,runtimeStyle,getComputedStyle style 标准的样式,可能是由style属性指定的!

runtimeStyle 运行时的样式!如果与style的属性重叠,将覆盖style的属性!

currentStyle 指 style 和 runtimeStyle 的结合! 通过currentStyle就可以获取到通过内联或外部引用的CSS样式的值了(仅限IE) 如:document.getElementById("test").currentStyle.top

要兼容FF,就得需要getComputedStyle 出马了

注意: getComputedStyle是firefox中的, currentStyle是ie中的. 比如说

<style>
#mydiv {
     width : 300px;
}
</style>
则:

var mydiv = document.getElementById('mydiv');
if(mydiv.currentStyle) {
      var width = mydiv.currentStyle['width'];
      alert('ie:' + width);
} else if(window.getComputedStyle) {
      var width = window.getComputedStyle(mydiv , null)['width'];
      alert('firefox:' + width);
}
另外在FF下还可以通过下面的方式获取

1
2
document.defaultView.getComputedStyle(mydiv,null).width;
window.getComputedStyle(mydiv , null).width;
分享到:
评论

相关推荐

    前端学习笔记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

    ### JavaScript Style 对象与 CurrentStyle 对象详解 #### 一、Style 对象 **定义**: - `Style` 对象代表一个单独的样式声明,它可以从应用样式的文档元素访问。`Style` 对象主要用来获取元素的内联样式,即元素...

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

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

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

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

    style、 currentStyle、 runtimeStyle区别分析

    在跨浏览器的JavaScript开发中,通常会使用标准的 `getComputedStyle` 方法(在非IE浏览器中)来代替 `currentStyle`。理解和掌握这三个属性的差异对于动态调整网页样式和解决样式优先级问题至关重要。

    getComputedStyle_tyle.rar_getComputedSty_getcomputedstyle

    在标题“getComputedStyle_tyle.rar_getComputedSty_getcomputedstyle”中,我们可以看到这个主题被重点关注,它可能包含了关于如何使用`getComputedStyle`来获取和处理元素样式的详细教程。 `getComputedStyle`...

    JS中的getComputedStyle1

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

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

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

    javascript获取非行间样式的方法

    总结来说,这篇文章介绍了如何使用JavaScript获取非行间样式,包括在IE中使用`currentStyle`属性以及在其他浏览器中使用`getComputedStyle`方法。同时,通过封装函数`getstyle`,使得获取任何属性变得更加便捷和统一...

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

    ### JavaScript与CSS交互时style属性获取问题解析 在前端开发中,JavaScript经常被用来操作DOM元素,实现动态页面效果。然而,在实际应用过程中,开发者可能会遇到一个常见的问题:使用JavaScript的`element.style`...

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

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

    JavaScript样式.pdf

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

    JavaScript帮助文档2

    ### JavaScript面向对象基础 #### 一、对象属性的设置与访问 JavaScript虽然不是纯粹的面向对象编程语言,但其提供了一定程度上的面向对象能力。在JavaScript中,对象的属性可以很容易地通过以下几种方式进行设置和...

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

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

Global site tag (gtag.js) - Google Analytics