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 相关文章推荐
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
Mar 16 Javascript
javascript写的异步加载js文件函数(支持数组传参)
Jun 07 Javascript
js+css实现select的美化效果
Mar 24 Javascript
js格式化时间的简单实例
Nov 27 Javascript
将JSON字符串转换成Map对象的方法
Nov 30 Javascript
BootStrap便签页的简单应用
Jan 06 Javascript
JS实现复选框的全选和批量删除功能
Apr 05 Javascript
jQuery Plupload上传插件的使用
Apr 19 jQuery
React实现全局组件的Toast轻提示效果
Sep 21 Javascript
解决vue的过渡动画无法正常实现问题
Oct 31 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
Oct 15 Javascript
JS算法教程之字符串去重与字符串反转
Dec 15 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 ss7.5的数据调用 (笔记)
2010/03/08 PHP
第4章 数据处理-php正则表达式-郑阿奇(续)
2011/07/04 PHP
使用PHP强制下载PDF文件示例
2014/01/17 PHP
PHP实现指定字段的多维数组排序函数分享
2015/03/09 PHP
php使用MySQL保存session会话的方法
2015/06/26 PHP
php项目开发中用到的快速排序算法分析
2016/06/25 PHP
JavaScript Base64编码和解码,实现URL参数传递。
2006/09/18 Javascript
HTA版JSMin(省略修饰语若干)基于javascript语言编写
2009/12/24 Javascript
js 分页全选或反选标识实现代码
2011/08/09 Javascript
JS完成代码前最好对其做5件事
2013/04/07 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
2013/12/23 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
2016/09/16 Javascript
jQuery和JavaScript节点插入元素的方法对比
2016/11/18 Javascript
javascript表达式和运算符详解
2017/02/07 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
2017/03/08 Javascript
JS实现简单的浮动碰撞效果示例
2017/12/28 Javascript
layui-table获得当前行的上/下一行数据的例子
2019/09/24 Javascript
JS运算符简单用法示例
2020/01/19 Javascript
python计算圆周长、面积、球体体积并画出圆
2014/04/08 Python
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
Python处理PDF及生成多层PDF实例代码
2017/04/24 Python
Python对文件和目录进行操作的方法(file对象/os/os.path/shutil 模块)
2017/05/08 Python
Python实现字符串逆序输出功能示例
2017/06/24 Python
Python中数组,列表:冒号的灵活用法介绍(np数组,列表倒序)
2018/04/18 Python
Python访问MongoDB,并且转换成Dataframe的方法
2018/10/15 Python
Pythony运维入门之Socket网络编程详解
2019/04/15 Python
Python面向对象进阶学习
2019/05/21 Python
解决Python 写文件报错TypeError的问题
2020/10/23 Python
CSS3弹性布局内容对齐(justify-content)属性使用详解
2017/07/31 HTML / CSS
英国最大的独立玩具专卖店:The Entertainer
2019/09/06 全球购物
配件采购员岗位职责
2013/12/03 职场文书
网上祭先烈心得体会
2014/09/01 职场文书
共产党员批评与自我批评
2014/10/15 职场文书
教育实习指导教师评语
2014/12/31 职场文书
在Django中使用MQTT的方法
2021/05/10 Python
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫