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 相关文章推荐
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
Sep 19 Javascript
介绍JavaScript的一个微型模版
Jun 24 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
Nov 24 Javascript
js实现(全选)多选按钮的方法【附实例】
Mar 30 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
Jun 03 Javascript
JS实现刷新父页面不弹出提示框的方法
Jun 22 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
Apr 13 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
详解javascript设计模式三:代理模式
Mar 25 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
May 14 Javascript
Vue项目总结之webpack常规打包优化方案
Jun 06 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
Nov 10 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
windows下开发并编译PHP扩展的方法
2011/03/18 PHP
又一个PHP实现的冒泡排序算法分享
2014/08/21 PHP
Jquery CheckBox全选方法代码附js checkbox全选反选代码
2010/06/09 Javascript
JS实现静止元素自动移动示例
2014/04/14 Javascript
JavaScript对象之深度克隆介绍
2014/12/08 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
2015/08/05 Javascript
用js动态添加html元素,以及属性的简单实例
2016/07/19 Javascript
Node.js连接postgreSQL并进行数据操作
2016/12/18 Javascript
微信小程序 弹窗自定义实例代码
2017/03/08 Javascript
angularjs定时任务的设置与清除示例
2017/06/02 Javascript
AngularJs 禁止模板缓存的方法
2017/11/28 Javascript
详解为生产环境编译Angular2应用的方法
2018/12/10 Javascript
详解滑动穿透(锁body)终极探索
2019/04/16 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
2020/07/20 Javascript
解决python3 pika之连接断开的问题
2018/12/18 Python
将数据集制作成VOC数据集格式的实例
2020/02/17 Python
详解Pycharm出现out of memory的终极解决方法
2020/03/03 Python
python 使用事件对象asyncio.Event来同步协程的操作
2020/05/04 Python
pytorch VGG11识别cifar10数据集(训练+预测单张输入图片操作)
2020/06/24 Python
Python如何实现自带HTTP文件传输服务
2020/07/08 Python
使用css3制作动感导航条示例
2014/01/26 HTML / CSS
华为旗下电子商务平台:华为商城
2016/08/06 全球购物
英国时尚优质的女装:Hope Fashion
2018/08/14 全球购物
英国领先的体验日提供商:Buyagift
2019/04/19 全球购物
Tessabit美国:集世界奢侈品和设计师品牌的意大利精品买手店
2020/06/29 全球购物
面向对象编程的优势是什么
2015/12/17 面试题
大学专科自荐信
2014/06/17 职场文书
授权委托书格式
2014/07/31 职场文书
文明好少年事迹材料
2014/08/19 职场文书
大学生国庆节65周年演讲稿范文
2014/09/25 职场文书
个人工作作风整改措施思想汇报
2014/10/13 职场文书
2015新学期校长寄语(3篇)
2015/03/25 职场文书
2015年小学体育工作总结
2015/05/22 职场文书
教你使用Python pypinyin库实现汉字转拼音
2021/05/27 Python
Java 在生活中的 10 大应用
2021/11/02 Java/Android
Python  序列化反序列化和异常处理的问题小结
2022/12/24 Python