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打印网页部分内容的脚本
Nov 17 Javascript
jQuery .tmpl(), .template()学习资料小结
Jul 18 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
Mar 10 Javascript
理解和运用JavaScript的闭包机制
Aug 13 Javascript
微信小程序 引用其他js文件实现代码
Feb 22 Javascript
Javascript中八种遍历方法的执行速度深度对比
Apr 25 Javascript
js获取一组日期中最近连续的天数
May 25 Javascript
ES6新增的math,Number方法
Aug 06 Javascript
小程序点击图片实现png转jpg
Oct 22 Javascript
js判断非127开头的IP地址的实例代码
Jan 05 Javascript
vue+iview使用树形控件的具体使用
Nov 02 Javascript
在vue中通过render函数给子组件设置ref操作
Nov 17 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 第二节 数据类型之字符串类型
2012/04/28 PHP
浅析PHP程序防止ddos,dns,集群服务器攻击的解决办法
2013/06/18 PHP
分享常见的几种页面静态化的方法
2015/01/08 PHP
CodeIgniter控制器之业务逻辑实例分析
2016/01/20 PHP
php实现记事本案例
2020/10/20 PHP
Javascript 通过json自动生成Dom的代码
2010/04/01 Javascript
Webkit的跨域安全问题说明
2011/09/13 Javascript
javascript 使td内容不换行不撑开
2012/11/29 Javascript
jQuery选择器之基本选择器与层次选择器
2015/03/03 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
2015/03/20 Javascript
浅谈JS封闭函数、闭包、内置对象
2017/07/18 Javascript
vue 中动态绑定class 和 style的方法代码详解
2018/06/01 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
2019/05/07 Javascript
原生js实现照片墙效果
2020/10/13 Javascript
解决vue init webpack 下载依赖卡住不动的问题
2020/11/09 Javascript
javascript实现点击小图显示大图
2020/11/29 Javascript
[01:01:43]EG vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
python的几种开发工具介绍
2007/03/07 Python
Python基于select实现的socket服务器
2016/04/13 Python
对python的文件内注释 help注释方法
2018/05/23 Python
对python3新增的byte类型详解
2018/12/04 Python
PyQt5 如何让界面和逻辑分离的方法
2020/03/24 Python
使用keras框架cnn+ctc_loss识别不定长字符图片操作
2020/06/29 Python
python实现图像外边界跟踪操作
2020/07/13 Python
诗普兰迪官方网站:Splendid
2018/09/18 全球购物
定制别致的瑜伽垫:Sugarmat
2019/06/21 全球购物
什么是GWT的Entry Point
2013/08/16 面试题
高三政治教学反思
2014/02/06 职场文书
党员领导干部廉洁从政承诺书
2014/03/27 职场文书
出纳年终工作总结2014
2014/12/05 职场文书
党员倡议书
2015/01/19 职场文书
写给领导的感谢信
2015/01/22 职场文书
护理工作心得体会
2016/01/22 职场文书
java多态注意项小结
2021/10/16 Java/Android
Java字符缓冲流BufferedWriter
2022/04/09 Java/Android
Windows Server 2016 配置 IIS 的详细步骤
2022/04/28 Servers