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

style、 currentStyle、 runtimeStyle区别分析-javascript技巧

 
阅读更多
1、obj.style只能获得内嵌样式(inline Style)就是写在Tag里面的,他访问不到那些链接的外部css和在head中用<style>声明的style。 
所以必须认识到在那些使用外部Css文件的页面中,如果用style赋值,如obj.style=“color:red”;显然效果是正确的,其中的奥秘确是只是在该对象的tag上多添加了一个style属性,按照由小到大的优先级呈现罢了。 
2、obj.currentStyle就强大多了,他能够获取关于这个节点所有位置的style,但是他也按照优先级,说穿了就是显示的是什么他就是指向哪一个style,如下代码字体优先是显示blue的,那currentStyle.color就是blue,当然此时style.color也会是blue。 

复制代码 代码如下:

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<title>testStyle</title> 
<style> 
.lala{ 
color:yellow; 
} 
</style> 
</head> 
<body> 
<div id="tt" style="color:blue;" class="lala">1111</div> 
</body> 
<script> 
alert(document.getElementById("tt").currentStyle.color); 
</script> 
</html> 


若去掉以上<div>中的style为<div id="tt" class="lala">1111</div>,那么currentStyle.color就根据优先级变成了yellow,但是此时style.color为空。 
3、runtimeStyle简单的说就是你可以对一个节点的样式赋值,他将成为最高优先级的节点样式。 
如: 

复制代码 代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<style> 
.lala{ 
color:yellow; 
}</style> 
</head> 
<body> 
<div id="tt" style="color:blue;" class="lala">1111</div> 
</body> 
<script> 
document.getElementById("tt").runtimeStyle.color="black"; 
alert(document.getElementById("tt").currentStyle.color); 
alert(document.getElementById("tt").runtimeStyle.color); 
alert(document.getElementById("tt").style.color); 
</script> 
</html> 


此时页面显示字的颜色是runtimeStyle赋值后的black。但是只有currentStyle.color和runtimeStyle本身能够取到这个值,style.color取到的依然是tag中的blue。 

 

0
0
分享到:
评论

相关推荐

    style、 currentStyle、 runtimeStyle区别分析

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

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

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

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

    - **runtimeStyle属性**:专为IE设计的特殊属性,可以用来临时修改元素的样式,不会同步到style属性中,也不会反映到元素的当前样式(currentStyle)中。 - **currentStyle属性**:用于获取元素当前的实际样式值,在IE...

    select样式表

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

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

    ### jQuery 实现底部固定效果详解 #### 一、引言 在现代网页设计中,为了提升用户体验和页面美观度,很多网站都会采用一些特殊的设计方案,比如底部固定导航栏。...希望本文能帮助开发者更好地理解和掌握这一技巧。

    JavaScript_Quick_Reference

    ### JavaScript 快速参考知识点详解 #### 一、属性概览 在提供的部分代码片段中,我们可以看到一系列的属性和方法,这些是DOM(Document Object Model)对象的一部分,用于描述和操作网页文档中的元素。下面将对...

    js正确获取元素样式详解

    当使用JavaScript尝试获取元素的样式时,需要注意的是,标准的DOM操作方法document.getElementById(id).style只能获取到元素的内联样式,而无法获取到外部样式表或嵌入式样式的样式值。这是因为内联样式是直接写在...

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

    - 程序中使用了一种技巧,通过设置`body`的背景为`fixed`,并利用`expression`属性来实现IE6下的相对窗口定位。 - 创建一个定位层,该层的大小与窗口相同,并且与窗口的位置重合。其他元素相对于这个定位层定位,...

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

    下面将详细总结和分析这些常见的兼容性易错问题,帮助开发者更好地理解和掌握如何在不同浏览器环境中编写兼容性良好的JavaScript代码。 一、属性相关 在JavaScript中,我们通常将HTML元素的特征(attribute)和属性...

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

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

Global site tag (gtag.js) - Google Analytics