样式表有三种方式
内嵌样式(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`的用法与区别至关重要。这些属性和方法允许我们在JavaScript中动态获取和修改元素的样式,从而实现丰富的用户界面交互。 首先,我们要了解...
以下是对`style`、`currentStyle`和`getComputedStyle`之间区别的详细解释: 1. **内联样式(Inline Style)**: 内联样式是最直接的方式,通过在HTML元素的`style`属性中设置CSS样式。这些样式优先级最高,只对该...
在JavaScript中,获取CSS样式的方法主要有两种:`element.style` 和 `window.getComputedStyle()` 或 `element.currentStyle`(仅IE浏览器)。这些方法可以帮助开发者在运行时动态地读取或修改页面元素的样式。 ...
大家都知道,用document.getElementById(‘element’).style.xxx可以获取元素的...但是事情还没完,万恶的IE不支持此方法,它有自己的一个实现方式,那就是currentStyle,不同于全局方法getComputedStyle,它是作为DO
### JavaScript Style 对象与 CurrentStyle 对象详解 #### 一、Style 对象 **定义**: - `Style` 对象代表一个单独的样式声明,它可以从应用样式的文档元素访问。`Style` 对象主要用来获取元素的内联样式,即元素...
在跨浏览器的JavaScript开发中,通常会使用标准的 `getComputedStyle` 方法(在非IE浏览器中)来代替 `currentStyle`。理解和掌握这三个属性的差异对于动态调整网页样式和解决样式优先级问题至关重要。
例如,IE8及以下版本使用`currentStyle`代替`getComputedStyle`,所以在编写跨浏览器的代码时,需要考虑到这一点。 总之,`getComputedStyle`是JavaScript中处理样式信息的重要工具,它可以帮助开发者获取元素在...
- 在IE8及以下版本,`getComputedStyle`被替换为`currentStyle`对象,使用方式略有不同。 - 对于跨框架(iframe)的元素,需要确保`getComputedStyle`调用在与目标元素相同的窗口或框架上下文中。 总之,`...
在IE中,可以通过element.currentStyle属性来获取元素的当前样式,但与getComputedStyle()不同的是,currentStyle返回的是元素的实时样式,而不仅仅是计算后的样式。在IE9及更高版本中,虽然开始支持...
为了兼容IE浏览器,可以使用一个条件表达式来检查`getComputedStyle`方法是否存在,如果不存在,可以使用IE特有的`currentStyle`属性来获取样式值。例如: ```javascript var style = window.getComputedStyle ? ...
### JavaScript与CSS交互时style属性获取问题解析 在前端开发中,JavaScript经常...通过使用`getComputedStyle`方法、调整CSS优先级或动态添加CSS类等手段,可以有效地解决`element.style`无法获取到预期样式的问题。
总结来说,这篇文章介绍了如何使用JavaScript获取非行间样式,包括在IE中使用`currentStyle`属性以及在其他浏览器中使用`getComputedStyle`方法。同时,通过封装函数`getstyle`,使得获取任何属性变得更加便捷和统一...
var style = window.getComputedStyle(box, null); alert(style.color); // 返回颜色值 ``` - **注意**:对于一些特殊属性(如`float`),可能需要使用`cssFloat`或`styleFloat`来获取正确的值。 #### `...
`currentStyle`属性是IE浏览器中用于替代标准DOM中的`window.getComputedStyle`方法的。这个属性允许开发者访问当前元素的样式信息,包括内联样式、继承样式以及默认样式。然而,当元素的宽度或高度没有被明确设置时...
2. 通过JavaScript的计算样式方法,如obj.currentStyle或document.defaultView.getComputedStyle(),来获取元素的宽度和高度。 3. 获取完尺寸后,需要将元素的display属性和visibility属性恢复原样,以避免元素位置...