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拖动图片删除示例
May 10 Javascript
使用JS CSS去除IE链接虚线框的三种方法
Nov 14 Javascript
为jQuery添加Webkit的触摸的方法分享
Feb 02 Javascript
js中精确计算加法和减法示例
Mar 28 Javascript
SpringMVC返回json数据的三种方式
Dec 10 Javascript
解析javascript瀑布流原理实现图片滚动加载
Mar 10 Javascript
javascript冒泡排序小结
Apr 10 Javascript
浅谈vue.js中v-for循环渲染
Jul 26 Javascript
浅谈angular4实际项目搭建总结
Dec 01 Javascript
ionic3双击返回退出应用的方法
Sep 17 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
Mar 04 Javascript
Vue自定义全局弹窗组件操作
Aug 11 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
Flash空降上海 化身大魔王接受挑战
2020/03/02 星际争霸
PHP新手上路(二)
2006/10/09 PHP
php curl选项列表(超详细)
2013/07/01 PHP
走出JavaScript初学困境—js初学
2008/12/29 Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
2011/03/06 Javascript
js的2种继承方式详解
2014/03/04 Javascript
JavaScript面向对象编程入门教程
2014/04/16 Javascript
JavaScript判断变量是否为空的自定义函数分享
2015/01/31 Javascript
jquery操作select方法汇总
2015/02/05 Javascript
理解和运用JavaScript的闭包机制
2015/08/13 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
2015/11/29 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
2016/05/11 Javascript
AngularJS控制器详解及示例代码
2016/08/16 Javascript
koa2的中间件功能及应用示例
2020/03/05 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
2020/09/21 Javascript
python通过shutil实现快速文件复制的方法
2015/03/14 Python
通过Python来使用七牛云存储的方法详解
2015/08/07 Python
NumPy 如何生成多维数组的方法
2018/02/05 Python
python批量读取txt文件为DataFrame的方法
2018/04/03 Python
python批量复制图片到另一个文件夹
2018/09/17 Python
python实现12306登录并保存cookie的方法示例
2019/12/17 Python
Pytest参数化parametrize使用代码实例
2020/02/22 Python
CSS3关于z-index不生效问题的解决
2020/02/19 HTML / CSS
仿酷狗html5手机音乐播放器主要部分代码
2013/05/15 HTML / CSS
英国领先的男士美容护发用品公司:Mankind
2016/08/31 全球购物
有机童装:Toby Tiger
2018/05/23 全球购物
奢华时尚的独特视角:La Garçonne
2018/06/07 全球购物
英国Lookfantastic中文网站:护肤品美妆美发购物(英国直邮)
2020/04/27 全球购物
大学生个人简历中的自我评价
2013/12/27 职场文书
管理失职检讨书
2014/02/12 职场文书
个人担保书范文
2014/05/20 职场文书
信仰心得体会
2014/09/05 职场文书
打架赔偿协议书范本
2014/10/26 职场文书
2014年终个人总结报告
2015/03/09 职场文书
中学社团活动总结
2015/05/07 职场文书
《天使的翅膀》读后感3篇
2019/12/20 职场文书