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 检测浏览器和操作系统的脚本
Dec 26 Javascript
js使用setTimeout实现定时炸弹的方法
Apr 10 Javascript
JavaScript实现图片DIV竖向滑动的方法
Apr 25 Javascript
轻松理解JavaScript之AJAX
Mar 15 Javascript
js如何获取网页所有图片
May 12 Javascript
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
Sep 07 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
Apr 23 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
May 10 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
Oct 27 Javascript
Javascript数组及类数组相关原理详解
Oct 29 Javascript
JS中如何优雅的使用async await详解
Oct 05 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
解决了Ajax、MySQL 和 Zend Framework 的乱码问题
2009/03/03 PHP
PHP 一个随机字符串生成代码
2010/05/26 PHP
php生成html文件方法总结
2014/12/01 PHP
javascript showModalDialog 内跳转页面的问题
2010/11/25 Javascript
javascript中expression的用法整理
2014/05/13 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
2015/03/18 Javascript
javascript实现树形菜单的方法
2015/07/17 Javascript
jQuery增加、删除及修改select option的方法
2016/08/19 Javascript
js实现导航栏中英文切换效果
2017/01/16 Javascript
Vuex提升学习篇
2018/01/11 Javascript
JS运动特效之任意值添加运动的方法分析
2018/01/24 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
2018/01/25 Javascript
vue项目tween方法实现返回顶部的示例代码
2018/03/02 Javascript
js捆绑TypeScript声明文件的方法教程
2018/04/13 Javascript
vue实现选项卡及选项卡切换效果
2018/04/24 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
2018/10/24 Javascript
原生javascript实现连连看游戏
2019/01/03 Javascript
vue实现PC端分辨率适配操作
2020/08/03 Javascript
js异步接口并发数量控制的方法示例
2020/11/22 Javascript
Python构造函数及解构函数介绍
2015/02/26 Python
Python返回真假值(True or False)小技巧
2015/04/10 Python
Python 实现文件的全备份和差异备份详解
2016/12/27 Python
Python实现购物评论文本情感分析操作【基于中文文本挖掘库snownlp】
2018/08/07 Python
Python流程控制常用工具详解
2020/02/24 Python
keras:model.compile损失函数的用法
2020/07/01 Python
python实现图书馆抢座(自动预约)功能的示例代码
2020/09/29 Python
如何通过Python实现RabbitMQ延迟队列
2020/11/28 Python
Ruby如何实现动态方法调用
2012/11/18 面试题
陈安之励志演讲稿
2014/08/21 职场文书
县委班子四风对照检查材料思想汇报
2014/09/29 职场文书
2014年司机工作总结
2014/11/21 职场文书
员工评语范文
2014/12/31 职场文书
学习保证书100字
2015/02/26 职场文书
人间正道是沧桑观后感
2015/06/15 职场文书
2016秋季幼儿园开学寄语
2015/12/03 职场文书
2019个人工作态度自我评价
2019/04/24 职场文书