style、 currentStyle、 runtimeStyle区别分析


Posted in Javascript onAugust 01, 2010

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。
Javascript 相关文章推荐
javascript 避免闭包引发的问题
Mar 17 Javascript
JS 动态获取节点代码innerHTML分析 [IE,FF]
Nov 30 Javascript
jquery怎样实现ajax联动框(二)
Mar 08 Javascript
简介AngularJS的HTML DOM支持情况
Jun 17 Javascript
使用js复制链接中的部分文字的方法
Jul 30 Javascript
详解JavaScript函数
Dec 01 Javascript
用js实现放大镜的效果的简单实例
May 23 Javascript
Bootstrap的Refresh Icon也spin起来
Jul 13 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
Sep 02 Javascript
百度搜索框智能提示案例jsonp
Nov 28 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
Dec 21 Javascript
vue select选择框数据变化监听方法
Aug 24 Javascript
JavaScript为对象原型prototype添加属性的两种方式
Aug 01 #Javascript
javascript函数中的arguments参数
Aug 01 #Javascript
jquery dialog键盘事件代码
Aug 01 #Javascript
网站页面自动跳转实现方法PHP、JSP(下)
Aug 01 #Javascript
网站页面自动跳转实现方法PHP、JSP(上)
Aug 01 #Javascript
JS DOM 操作实现代码
Aug 01 #Javascript
JQuery自定义事件的应用 JQuery最佳实践
Aug 01 #Javascript
You might like
Zend Studio 无法启动的问题解决方法
2008/12/04 PHP
php中数组首字符过滤功能代码
2012/07/31 PHP
php更新mysql后获取影响的行数发生异常解决方法
2013/03/28 PHP
PHP 转义使用详解
2013/07/15 PHP
jQuery.extend 函数详解
2012/02/03 Javascript
jQuery UI Autocomplete 体验分享
2012/02/14 Javascript
js身份证判断方法支持15位和18位
2014/03/18 Javascript
js中document.write的那点事
2014/12/12 Javascript
使用requestAnimationFrame实现js动画性能好
2015/08/06 Javascript
Bootstrap carousel轮转图的使用实例详解
2016/05/17 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
2016/08/01 Javascript
JavaScript 事件对内存和性能的影响
2017/01/22 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
2017/12/21 Javascript
微信小程序云开发实现增删改查功能
2019/05/17 Javascript
vue中get请求如何传递数组参数的方法示例
2019/11/08 Javascript
[44:47]Ti4 循环赛第三日 iG vs NaVi
2014/07/12 DOTA
[44:15]国士无双DOTA2 6.82版本详解(上)
2014/09/28 DOTA
[33:17]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python基于pygame实现的弹力球效果(附源码)
2015/11/11 Python
对变量赋值的理解--Pyton中让两个值互换的实现方法
2017/11/29 Python
ubuntu中配置pyqt4环境教程
2017/12/27 Python
Python实现的查询mysql数据库并通过邮件发送信息功能
2018/05/17 Python
python模块hashlib(加密服务)知识点讲解
2019/11/25 Python
基于FME使用Python过程图解
2020/05/13 Python
CSS实现雨滴动画效果的实例代码
2019/10/08 HTML / CSS
西班牙拥有最佳品牌的动物商店:Animalear.com
2018/01/05 全球购物
美国领先的商务贺卡出版商:The Gallery Collection
2018/02/13 全球购物
Gucci法国官方网站:意大利奢侈品牌
2018/07/25 全球购物
以工厂直接定价的传奇性能:Ben Hogan Golf
2019/01/04 全球购物
汽车驾驶求职信
2013/10/25 职场文书
国际贸易毕业生求职信范文
2014/02/21 职场文书
优秀班组事迹材料
2014/12/24 职场文书
2015年世界环境日活动方案
2015/05/05 职场文书
2016年元旦主持词
2015/07/06 职场文书
2016国庆促销广告语
2016/01/28 职场文书
Django数据库(SQlite)基本入门使用教程
2022/07/07 Python