`
JavaSam
  • 浏览: 952716 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

style、currentStyle、getComputedStyle区别介绍

 
阅读更多

样式表有三种方式

      内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效。

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

      外部样式表(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;

     }

</styke>

则:

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下还可以通过下面的方式获取

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样式。这些样式优先级最高,只对该...

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

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

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

    大家都知道,用document.getElementById(‘element’).style.xxx可以获取元素的...但是事情还没完,万恶的IE不支持此方法,它有自己的一个实现方式,那就是currentStyle,不同于全局方法getComputedStyle,它是作为DO

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

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

    style、 currentStyle、 runtimeStyle区别分析

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

    getComputedStyle_tyle.rar_getComputedSty_getcomputedstyle

    例如,IE8及以下版本使用`currentStyle`代替`getComputedStyle`,所以在编写跨浏览器的代码时,需要考虑到这一点。 总之,`getComputedStyle`是JavaScript中处理样式信息的重要工具,它可以帮助开发者获取元素在...

    JS中的getComputedStyle1

    - 在IE8及以下版本,`getComputedStyle`被替换为`currentStyle`对象,使用方式略有不同。 - 对于跨框架(iframe)的元素,需要确保`getComputedStyle`调用在与目标元素相同的窗口或框架上下文中。 总之,`...

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

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

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

    为了兼容IE浏览器,可以使用一个条件表达式来检查`getComputedStyle`方法是否存在,如果不存在,可以使用IE特有的`currentStyle`属性来获取样式值。例如: ```javascript var style = window.getComputedStyle ? ...

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

    ### JavaScript与CSS交互时style属性获取问题解析 在前端开发中,JavaScript经常...通过使用`getComputedStyle`方法、调整CSS优先级或动态添加CSS类等手段,可以有效地解决`element.style`无法获取到预期样式的问题。

    javascript获取非行间样式的方法

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

    js计算后的样式

    var style = window.getComputedStyle(box, null); alert(style.color); // 返回颜色值 ``` - **注意**:对于一些特殊属性(如`float`),可能需要使用`cssFloat`或`styleFloat`来获取正确的值。 #### `...

    元素未显示设置width/height时IE中使用currentStyle获取为auto

    `currentStyle`属性是IE浏览器中用于替代标准DOM中的`window.getComputedStyle`方法的。这个属性允许开发者访问当前元素的样式信息,包括内联样式、继承样式以及默认样式。然而,当元素的宽度或高度没有被明确设置时...

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

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

Global site tag (gtag.js) - Google Analytics