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 相关文章推荐
jquery eval解析JSON中的注意点介绍
Aug 23 Javascript
JavaScript中for..in循环陷阱介绍
Nov 12 Javascript
javascript中全局对象的parseInt()方法使用介绍
Dec 19 Javascript
js鼠标滑过图片震动特效的方法
Feb 17 Javascript
jQuery使用drag效果实现自由拖拽div
Jun 11 Javascript
JavaScript中Promise的使用详解
Feb 26 Javascript
在vue中,v-for的索引index在html中的使用方法
Mar 06 Javascript
js实现3D照片墙效果
Oct 28 Javascript
解决vue admin element noCache设置无效的问题
Nov 12 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
Jan 07 Javascript
vue动态设置页面title的方法实例
Aug 23 Javascript
利用JavaScript模拟京东按键输入功能
Dec 01 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
php 广告调用类代码(支持Flash调用)
2011/08/11 PHP
PHP应用JSON技巧讲解
2013/02/03 PHP
WordPress中用于创建以及获取侧边栏的PHP函数讲解
2015/12/29 PHP
php数值转换时间及时间转换数值用法示例
2017/05/18 PHP
js中查找最近的共有祖先元素的实现代码
2010/12/30 Javascript
jQuery 关于伪类选择符的使用说明
2013/04/24 Javascript
js写的方法实现上传图片之后查看大图
2014/03/05 Javascript
jQuery Easyui 验证两次密码输入是否相等
2016/05/13 Javascript
jquery树形菜单效果的简单实例
2016/06/06 Javascript
AngularJS Bootstrap详细介绍及实例代码
2016/07/28 Javascript
JS前向后瞻正则表达式定义与用法示例
2016/12/27 Javascript
Javascript中引用类型传递的知识点小结
2017/03/06 Javascript
详解AngularJS 过滤器的使用
2018/06/02 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
2018/06/28 Javascript
基于JavaScript 实现拖放功能
2019/09/12 Javascript
JS数组的常用10种方法详解
2020/05/08 Javascript
[01:04]DOTA2:伟大的Roshan雕塑震撼来临
2015/01/30 DOTA
Python实现partial改变方法默认参数
2014/08/18 Python
浅谈function(函数)中的动态参数
2017/04/30 Python
基于python(urlparse)模板的使用方法总结
2017/10/13 Python
python re模块findall()函数实例解析
2018/01/19 Python
python最长回文串算法
2018/06/04 Python
使用Django2快速开发Web项目的详细步骤
2019/01/06 Python
Django中从mysql数据库中获取数据传到echarts方式
2020/04/07 Python
详解tensorflow2.x版本无法调用gpu的一种解决方法
2020/05/25 Python
惠而浦美国官网:Whirlpool.com
2021/01/19 全球购物
static函数与普通函数有什么区别
2015/12/25 面试题
家长给孩子的表扬信
2014/01/17 职场文书
爱情寄语大全
2014/04/09 职场文书
三年级班级文化建设方案
2014/05/04 职场文书
迎新晚会策划方案
2014/06/13 职场文书
学习优秀党员杨宗兴先进事迹材料思想汇报
2014/09/14 职场文书
廉洁自律证明
2015/06/24 职场文书
趣味运动会赞词
2015/07/22 职场文书
python函数的两种嵌套方法使用
2022/04/02 Python
Spring Cloud Netflix 套件中的负载均衡组件 Ribbon
2022/04/13 Java/Android