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 相关文章推荐
jWiard 基于JQuery的强大的向导控件介绍
Oct 28 Javascript
Extjs表单常见验证小结
Mar 07 Javascript
jquery判断元素是否隐藏的多种方法
May 06 Javascript
无限树Jquery插件zTree的常用功能特性总结
Sep 11 Javascript
基于jQuery实现多层次的手风琴效果附源码
Sep 21 Javascript
快速掌握jQuery插件WebUploader文件上传
Nov 07 Javascript
JS设置随机出现2个数字的实例代码
Jul 19 Javascript
基于JavaScript实现表格滚动分页
Nov 22 Javascript
使用vue-aplayer插件时出现的问题的解决
Mar 02 Javascript
详细分析React 表单与事件
Jul 08 Javascript
解决pycharm双击但是无法打开的情况
Oct 31 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
Dec 20 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文件时顶部出现空白影响布局分析原因及解决办法
2013/01/11 PHP
PHP中substr函数字符串截取用法分析
2016/01/07 PHP
php和js实现根据子网掩码和ip计算子网功能示例
2019/11/09 PHP
jQuery初学:find()方法及children方法的区别分析
2011/01/31 Javascript
jQuery对html元素取值与赋值的方法
2013/11/20 Javascript
使用ajax+jqtransform实现动态加载select
2014/12/01 Javascript
node.js中的fs.futimesSync方法使用说明
2014/12/17 Javascript
javascript实现类似java中getClass()得到对象类名的方法
2015/07/27 Javascript
jQuery监听文件上传实现进度条效果的方法
2016/10/16 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
2017/05/25 jQuery
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
2019/01/27 Javascript
JavaScript封装单向链表的示例代码
2020/09/17 Javascript
[51:43]OG vs LGD 2018国际邀请赛淘汰赛BO3 第五场 8.26
2018/08/30 DOTA
python base64 decode incorrect padding错误解决方法
2015/01/08 Python
实例Python处理XML文件的方法
2015/08/31 Python
Python中用psycopg2模块操作PostgreSQL方法
2017/11/28 Python
Python在for循环中更改list值的方法【推荐】
2018/08/17 Python
Python读写zip压缩文件的方法
2018/08/29 Python
详解关于Django中ORM数据库迁移的配置
2018/10/08 Python
python实现远程控制电脑
2019/05/23 Python
余弦相似性计算及python代码实现过程解析
2019/09/18 Python
django-利用session机制实现唯一登录的例子
2020/03/16 Python
Python Numpy中数据的常用保存与读取方法
2020/04/01 Python
使用python画出逻辑斯蒂映射(logistic map)中的分叉图案例
2020/12/11 Python
python中numpy.empty()函数实例讲解
2021/02/05 Python
伦敦平价潮流珠宝首饰品牌:Astrid & Miyu
2016/10/10 全球购物
世界最大的票务市场:viagogo
2017/02/16 全球购物
汉森冲浪板:Hansen Surfboards
2018/05/19 全球购物
英国设计师泳装、沙滩装和比基尼在线精品店:Beach Cafe
2019/08/28 全球购物
基于Python 函数和方法的区别说明
2021/03/24 Python
品管员岗位职责
2013/11/10 职场文书
社会体育专业大学生职业生涯规划书
2014/09/17 职场文书
2014年安全员工作总结
2014/11/13 职场文书
2015年度内部审计工作总结
2015/05/20 职场文书
学生会宣传部竞选稿
2015/11/21 职场文书
.Net Core导入千万级数据至Mysql的步骤
2021/05/24 MySQL