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代码[翻译]
Feb 12 Javascript
jQuery(非HTML5)可编辑表格实现代码
Dec 11 Javascript
JavaScript操纵窗口的方法小结
Jun 28 Javascript
JS和函数式语言的三特性
Mar 05 Javascript
正则表达式(语法篇推荐)
Jun 24 Javascript
使用JavaScriptCore实现OC和JS交互详解
Mar 28 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
node thread.sleep实现示例
Jun 20 Javascript
微信小程序上传多图到服务器并获取返回的路径
May 05 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
Jul 20 Javascript
Vue实现返回顶部按钮实例代码
Oct 21 Javascript
Vue ​v-model相关知识总结
Jan 28 Vue.js
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用SAX解析XML的实现代码与问题分析
2011/08/22 PHP
thinkphp在php7环境下提示Cannot use ‘String’ as class name as it is reserved的解决方法
2016/09/30 PHP
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
javascript的onchange事件与jQuery的change()方法比较
2009/09/28 Javascript
基于jquery自定义图片热区效果
2012/07/21 Javascript
jQuery动画animate方法使用介绍
2013/05/06 Javascript
JavaScript函数定义的常见注意事项小结
2014/09/16 Javascript
jquery实现经典的淡入淡出选项卡效果代码
2015/09/22 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
2016/03/25 Javascript
JavaScript中的对象和原型(一)
2016/08/12 Javascript
详解vue-router 2.0 常用基础知识点之router-link
2017/05/10 Javascript
bootstrap table服务端实现分页效果
2017/08/10 Javascript
CKeditor4 字体颜色功能配置方法教程
2019/06/26 Javascript
vue 使用post/get 下载导出文件操作
2020/08/07 Javascript
JavaScript array常用方法代码实例详解
2020/09/02 Javascript
js仿淘宝放大镜效果
2020/12/28 Javascript
关于element的表单组件整理笔记
2021/02/05 Javascript
[53:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第三场 1月18日
2021/03/11 DOTA
Python实现小数转化为百分数的格式化输出方法示例
2017/09/20 Python
Python中单、双下划线的区别总结
2017/12/01 Python
python学习笔记--将python源文件打包成exe文件(pyinstaller)
2018/05/26 Python
python使用rpc框架gRPC的方法
2018/08/24 Python
No module named ‘win32gui‘ 的解决方法(踩坑之旅)
2021/02/18 Python
CSS3制作日历实现代码
2012/01/21 HTML / CSS
巧克力领导品牌瑞士莲美国官网:Lindt Chocolate美国
2016/08/25 全球购物
印度尼西亚电子产品购物网站:Kliknklik
2018/06/05 全球购物
Fnac西班牙官网:法国文化和电子产品零售商
2021/03/14 全球购物
趣味活动策划方案
2014/02/08 职场文书
大学生就业策划书范文
2014/04/04 职场文书
捐资助学倡议书
2014/04/15 职场文书
2014酒店客房部工作总结
2014/12/16 职场文书
广告公司文案策划岗位职责
2015/04/14 职场文书
2015年大学班级工作总结
2015/04/28 职场文书
工作建议书范文
2019/07/08 职场文书
600字作文之感受大自然
2019/11/27 职场文书
52条SQL语句教你性能优化
2021/05/25 MySQL