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 相关文章推荐
js计算页面刷新的次数
Jul 20 Javascript
jquery 触发a链接点击事件解决方案
May 02 Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
常用的Javascript设计模式小结
Dec 09 Javascript
javascript实现在网页中运行本地程序的方法
Feb 03 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
May 25 Javascript
Javascript实现登录记住用户名和密码功能
Mar 22 Javascript
AngularJS中下拉框的基本用法示例
Oct 11 Javascript
利用JS测试目标网站的打开响应速度
Dec 01 Javascript
利用Dectorator分模块存储Vuex状态的实现
Feb 05 Javascript
js实现坦克大战游戏
Feb 24 Javascript
前端性能优化建议
Sep 17 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防攻击代码升级版
2010/12/29 PHP
PHP fopen()和 file_get_contents()应用与差异介绍
2014/03/19 PHP
php中替换字符串中的空格为逗号','的方法
2014/06/09 PHP
php自动加载方式集合
2016/04/04 PHP
PHP+Ajax实现无刷新分页实例详解(附demo源码下载)
2016/04/07 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
利用js跨页面保存变量做菜单的方法
2008/01/17 Javascript
javascript正则表达式中参数g(全局)的作用
2010/11/11 Javascript
javascript时间自动刷新实现原理与步骤
2013/01/06 Javascript
JS格式化数字金额用逗号隔开保留两位小数
2013/10/18 Javascript
jquery对元素拖动排序示例
2014/01/16 Javascript
jquery实现弹出层完美居中效果
2014/03/03 Javascript
把jQuery的类、插件封装成seajs的模块的方法
2014/03/12 Javascript
JQuery中属性过滤选择器用法实例分析
2015/05/18 Javascript
自定义刻度jQuery进度条及插件
2015/09/02 Javascript
jQuery自定义组件(导入组件)
2016/11/08 Javascript
Javascript使用SWFUpload进行多文件上传
2016/11/16 Javascript
jquery网页加载进度条的实现
2017/06/01 jQuery
解决JQuery全选/反选第二次失效的问题
2017/10/11 jQuery
AngularJS使用ui-route实现多层嵌套路由的示例
2018/01/10 Javascript
nodejs结合Socket.IO实现的即时通讯功能详解
2018/01/12 NodeJs
jQuery实现ajax回调函数带入参数的方法示例
2018/06/26 jQuery
jquery 插件重新绑定的处理方法分析
2019/11/23 jQuery
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
2020/08/03 Javascript
[20:57]Ti4主赛事第三天开幕式
2014/07/21 DOTA
python中对list去重的多种方法
2014/09/18 Python
Python使用Redis实现作业调度系统(超简单)
2016/03/22 Python
Python企业编码生成系统总体系统设计概述
2019/07/26 Python
Django继承自带user表并重写的例子
2019/11/18 Python
Python二维数组实现求出3*3矩阵对角线元素的和示例
2019/11/29 Python
pytorch forward两个参数实例
2020/01/17 Python
在Python中使用K-Means聚类和PCA主成分分析进行图像压缩
2020/04/10 Python
Python在线和离线安装第三方库的方法
2020/10/31 Python
美国最大的网上冲印店:Shutterfly
2017/01/01 全球购物
公司同意接收函
2014/01/13 职场文书
本科毕业生求职自荐信
2014/02/03 职场文书