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 相关文章推荐
javascritp实现input输入框相关限制用法
Jun 29 Javascript
jquery 利用show和hidden实现级联菜单示例代码
Aug 09 Javascript
JS实现样式清新的横排下拉菜单效果
Oct 09 Javascript
Bootstrap开关(switch)控件学习笔记分享
May 30 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
Aug 24 Javascript
微信小程序开发(一) 微信登录流程详解
Jan 11 Javascript
jQuery简易时光轴实现方法示例
Mar 13 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
Dec 09 Javascript
checkbox在vue中的用法小结
Nov 13 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
解决layui-open关闭自身窗口的问题
Sep 10 Javascript
微信小程序如何获取地址
Dec 24 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数组对百万数据进行排除重复数据的实现代码
2010/06/08 PHP
9个PHP开发常用功能函数小结
2011/07/15 PHP
php教程 插件机制在PHP中实现方案
2012/11/02 PHP
整理的一些实用WordPress后台MySQL操作命令
2013/01/07 PHP
9条PHP编程小知识及易犯的小错误
2015/01/22 PHP
PHP使用http_build_query()构造URL字符串的方法
2016/04/02 PHP
详解PHP PDO简单教程
2019/05/28 PHP
Nigma vs Liquid BO3 第一场2.14
2021/03/10 DOTA
关于__defineGetter__ 和__defineSetter__的说明
2007/05/12 Javascript
javascript中的prototype属性实例分析说明
2010/08/09 Javascript
js删除所有的cookie的代码
2010/11/25 Javascript
禁用JavaScript控制台调试的方法
2014/03/07 Javascript
javascript获取系统当前时间的方法
2015/11/19 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
2016/02/06 Javascript
javascript瀑布流式图片懒加载实例解析与优化
2016/02/23 Javascript
jquery点击切换背景色的简单实例
2016/08/25 Javascript
easyui form validate总是返回false的原因及解决方法
2016/11/07 Javascript
Angular.js中定时器循环的3种方法总结
2017/04/27 Javascript
js登录滑动验证的实现(不滑动无法登陆)
2018/01/03 Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
2019/01/18 Javascript
微信小程序官方动态自定义底部tabBar的例子
2019/09/04 Javascript
[01:14]DOTA2亚洲邀请赛小组赛赛前花絮
2017/03/27 DOTA
Python合并同一个文件夹下所有PDF文件的方法
2019/03/11 Python
django Admin文档生成器使用详解
2019/07/22 Python
Flask框架模板继承实现方法分析
2019/07/31 Python
python2与python3爬虫中get与post对比解析
2019/09/18 Python
Python-openpyxl表格读取写入的案例详解
2020/11/02 Python
Alba Moda德国网上商店:意大利时尚女装销售
2016/11/14 全球购物
世界上最大的糖果店:Dylan’s Candy Bar
2017/11/07 全球购物
美国家庭鞋店:Shoe Sensation
2019/09/27 全球购物
Diesel美国网上商店:意大利牛仔时装品牌
2020/12/10 全球购物
经典优秀个人求职信分享
2013/12/12 职场文书
商场拾金不昧表扬信
2014/01/13 职场文书
政治思想表现评语
2014/05/04 职场文书
没有孩子的离婚协议书怎么写
2014/09/17 职场文书
2016幼儿园中班开学寄语
2015/12/03 职场文书