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里使用Dom操作Xml
Jan 22 Javascript
Node.js中调用mysql存储过程示例
Dec 20 Javascript
javascript实现checkBox的全选,反选与赋值
Mar 12 Javascript
JavaScript图像延迟加载库Echo.js
Apr 05 Javascript
新手学习前端之js模仿淘宝主页网站
Oct 31 Javascript
layer弹出层中H5播放器全屏出错的解决方法
Feb 21 Javascript
jqgrid实现简单的单行编辑功能
Sep 30 Javascript
详谈js的变量提升以及使用方法
Oct 06 Javascript
elementUI select组件value值注意事项详解
May 29 Javascript
js实现指定时间倒计时效果
Aug 26 Javascript
微信小程序实现导航栏和内容上下联动功能代码
Jun 29 Javascript
微信小程序中data-key属性之数据传输(经验总结)
Aug 22 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出错界面
2006/10/09 PHP
PHP 处理图片的类实现代码
2009/10/23 PHP
Linux环境下搭建php开发环境的操作步骤
2013/06/17 PHP
php include和require的区别深入解析
2013/06/17 PHP
PHP之autoload运行机制实例分析
2014/08/28 PHP
php通过array_merge()函数合并两个数组的方法
2015/03/18 PHP
php实现的简单数据库操作Model类
2016/11/16 PHP
Jquery获取复选框被选中值的简单方法
2013/07/04 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
2013/08/11 Javascript
JS应用正则表达式转换大小写示例
2014/09/18 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
2015/06/04 Javascript
js禁止页面刷新与后退的方法
2015/06/08 Javascript
使用Javascript写的2048小游戏
2015/11/25 Javascript
JavaScript轮播图简单制作方法
2017/02/20 Javascript
jquery实现页面加载效果
2017/02/21 Javascript
JavaScript字符串_动力节点Java学院整理
2017/06/27 Javascript
Vue实现移动端页面切换效果【推荐】
2018/11/13 Javascript
基于JS实现父组件的请求服务过程解析
2019/10/14 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
[36:33]完美世界DOTA2联赛循环赛 Matador vs Forest 第一场 11.06
2020/11/06 DOTA
推荐11个实用Python库
2015/01/23 Python
利用python发送和接收邮件
2016/09/27 Python
在windows下Python打印彩色字体的方法
2018/05/15 Python
使用Template格式化Python字符串的方法
2019/01/22 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
python-django中的APPEND_SLASH实现方法
2019/06/21 Python
深入浅析Python科学计算库Scipy及安装步骤
2019/10/12 Python
Python字典深浅拷贝与循环方式方法详解
2020/02/09 Python
Python连接SQLite数据库并进行增册改查操作方法详解
2020/02/18 Python
Pycharm新手使用教程(图文详解)
2020/09/17 Python
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
2012/12/30 HTML / CSS
CSS3 text shadow字体阴影效果
2016/01/08 HTML / CSS
物业经理求职自我评价
2013/09/22 职场文书
询价采购方案
2014/06/09 职场文书
三孔导游词
2015/02/05 职场文书
世界名著读书笔记
2015/06/25 职场文书