`
blanky01
  • 浏览: 7017 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

style,runtimeStyle与currentStyle的定义及用法

阅读更多

1.定义

style:标准的样式!可用来查询由html标签的style属性指定的样式
runtimeStyle: 运行时的样式!如果与style的属性重叠,将覆盖style的属性!
currentStyle:可用来查询/修改外联(由<link>所连接的样式表文件)或者内部(在<style>中的样式)样式表中的样式。

2.举例

<style type="text/css">
<!--
.div2{ width:200px; height:100px; background:#090;}
-->
</style>

<div id="div2" class="div2" style=" background:#CCC"></div>

<SCRIPT type=text/javascript>
var div=document.getElementById("div2");

alert(div.style.backgroundColor);//ie中输出#ccc,火狐中输出rgb(204,204,204)

alert(div.style.width);//ie中输出为空,火狐中输出为空
alert(div.currentStyle.width);//ie中输出为200px,火狐中无法输出
</SCRIPT>

3.兼容

上例中的最后一个输出语句在ff中无法运行,我们可以添加如下代码让无法运行currentStyle的浏览器可以运行它:

<SCRIPT type=text/javascript>
(function (bool) {
if (bool) {
HTMLElement.prototype.__defineGetter__("currentStyle", function () {
return this.ownerDocument.defaultView.getComputedStyle(this, null);
});
}
})(!document.body.currentStyle);


</SCRIPT>

分享到:
评论

相关推荐

    style、 currentStyle、 runtimeStyle区别分析

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

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

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

    关于使用runtimeStyle属性问题讨论文章

    2. **避免与innerHTML/outerHTML混用**:当使用runtimeStyle的同时还涉及innerHTML或outerHTML的操作时,需要特别小心,因为runtimeStyle所做的修改不会反映到HTML代码中,这可能导致意料之外的结果。 #### 五、...

    js正确获取元素样式详解

    第一种方法是使用JavaScript编写一个函数,这个函数会检查浏览器是否支持currentStyle属性,如果不支持,则使用window.getComputedStyle方法来获取样式。这个方法接受两个参数:元素对象和伪元素(如果需要的话,...

    select样式表

    oOption.runtimeStyle.display = sh[oOption.currentStyle.display]; } ``` ### 总结 通过上述方法,尽管`&lt;select&gt;`元素本身的样式难以完全自定义,但还是可以通过巧妙利用CSS属性和JavaScript来实现较为接近的...

    JS getStyle获取最终样式函数代码

    5. **元素样式的内部表示**:在IE浏览器中,元素的运行时样式是通过`runtimeStyle`属性表示的,而`currentStyle`属性结合了`runtimeStyle`和`style`属性。在标准模式下,`currentStyle`代表了应用在元素上的样式规则...

    AlertBox 弹出层信息提示框效果实现步骤

    layer = document.createElement("&lt;div style='position:absolute;border:0;padding:0;margin:0;overflow:hidden;background:transparent;top:expression((document).documentElement.scrollTop);left:expression(...

    jquery博客实现底部固定类似人人校内似的

    这段 JavaScript 代码用于解决 IE6 及更低版本浏览器的背景图不平铺的问题。 #### 四、测试与优化 完成以上步骤后,可以通过浏览器进行测试,确保底部固定效果在各种浏览器中都能正常显示。同时,还可以根据实际...

    用javascript在框架中实现的树形控件

    ### 使用JavaScript和XML实现的树形控件 #### 一、引言 本文将详细介绍一个使用JavaScript和XML数据实现的树形控件。该控件能够嵌入到框架(iframe)之中,并支持基本的交互操作,如点击节点展开/收起子节点、选择...

    javascript常用属性和方法[文].pdf

    `Style.letterSpacing`和`runtimeStyle.letterSpacing`可以调整字符间距。 `&lt;body background="clouds.gif"&gt;`设置背景图片,`&lt;b&gt;`标签用于创建粗体文本,`&lt;hr&gt;`标签生成直线。`window.setTimeout()`用于延迟执行...

    让Firefox支持event对象实现代码

    不过需要注意的是,`__defineGetter__`在现代浏览器中已经被更先进的`Object.defineProperty`所取代,因此在最新的代码中,应考虑使用后者进行更安全和灵活的属性定义。 总之,处理Firefox中的事件对象,我们需要...

    IE与firefox在Javascript上的区别.doc

    - 提供的代码片段展示了如何编写兼容 Firefox 的函数,如 `FixPrototypeForGecko()`,它通过定义 getter 方法来模拟 IE 中的行为。 - `element_prototype_get_runtimeStyle()`、`window_prototype_get_event()` 和...

    JavaScript_Quick_Reference

    3. **behaviorUrns[]**:用于与脚本组件交互的集合。 4. **canHaveChildren**:指示元素是否可以有子节点。 5. **canHaveHTML**:指示元素是否可以包含HTML内容。 6. **children**:返回元素的子元素集合。 7. **...

    js日历控件[超酷超漂亮]

    ### 三、使用方法 1. **调用方式**:通过调用`showModalDialog`函数打开日历对话框,传入HTML文件路径、日期格式等参数。 2. **参数设置**: - HTML文件路径:包含日历控件的HTML文件。 - 日期格式:可以选择不同...

    用javascript实现画板的代码

    ### 使用JavaScript实现画板的关键知识点 #### 一、项目背景与目标 本项目旨在通过JavaScript实现一个简单的画板功能,用户可以通过调用特定的方法来在画布上绘制线条和圆形等基本图形。此画板主要利用了HTML和...

    一个用js实现控制台控件的代码

    代码如下:&lt;body margin=”0″&gt; &lt;/body&gt; [removed] function Console(width,height,command) { var container=document.createElement(“div”); this.container=container;... container.runtimeStyle

    gridview 行选添加颜色和事件

    在RowDataBound事件处理器中,首先需要判断当前行的类型是否为数据行(DataRow),然后可以使用e.Row.Attributes.Add方法为行添加客户端事件处理器。例如,可以为onmouseover事件添加一个JavaScript函数,该函数会...

    IE6浏览器下PNG背景透明

    expression(this.runtimeStyle.backgroundImage = 'none', this.runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\',sizingMethod=\'scale\')'); } ``` 这里的`ie...

    总结js中的一些兼容性易错的问题

    在IE6/7/8中,可以使用elem.runtimeStyle配合pixelLeft来进行像素化处理,而在现代浏览器中,可以使用width属性处理。 - 在Webkit核心的浏览器中,margin-right经常会出错。 三、查询操作 查询操作指的是通过特定...

Global site tag (gtag.js) - Google Analytics