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 相关文章推荐
Javascript 学习笔记 错误处理
Jul 30 Javascript
javaScript复制功能调用实现方案
Dec 13 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
Sep 23 Javascript
JavaScript获取两个数组交集的方法
Jun 09 Javascript
AngularJS的一些基本样式初窥
Jul 27 Javascript
javascript设计模式--策略模式之输入验证
Nov 27 Javascript
Javascript实现检测客户端类型代码封包
Dec 03 Javascript
AngularJS 过滤器的简单实例
Jul 27 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
Jul 31 Javascript
js replace 全局替换的操作方法
Jun 12 Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
Jun 28 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
Nov 01 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 字符串分割和比较
2009/10/06 PHP
PHP Undefined index报错的修复方法
2011/07/17 PHP
深入解析PHP 5.3.x 的strtotime() 时区设定 警告信息修复
2013/08/05 PHP
php生成二维码时出现中文乱码的解决方法
2014/12/18 PHP
2017年最好用的9个php开发工具推荐(超好用)
2017/10/23 PHP
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
2013/09/16 Javascript
jQuery中insertAfter()方法用法实例
2015/01/08 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
2015/04/12 Javascript
JavaScript 模块的循环加载实现方法
2015/12/13 Javascript
微信jssdk在iframe页面失效问题的解决措施
2016/03/03 Javascript
原生JS:Date对象全面解析
2016/09/06 Javascript
JS之获取样式的简单实现方法(推荐)
2016/09/13 Javascript
微信小程序-小说阅读小程序实例(demo)
2017/01/12 Javascript
使用Bootstrap美化按钮实例代码(demo)
2017/02/03 Javascript
详解微信小程序设置底部导航栏目方法
2017/06/29 Javascript
微信小程序中使用自定义图标(阿里icon)的方法
2018/08/20 Javascript
jqGrid表格底部汇总、合计行footerrow处理
2019/08/21 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
JSONObject与JSONArray使用方法解析
2020/09/28 Javascript
Python获取linux主机ip的简单实现方法
2016/04/18 Python
python3爬取淘宝信息代码分析
2018/02/10 Python
Python元组及文件核心对象类型详解
2018/02/11 Python
Python多进程写入同一文件的方法
2019/01/14 Python
树莓派使用python-librtmp实现rtmp推流h264的方法
2019/07/22 Python
Python3.6+selenium2.53.6自动化测试_读取excel文件的方法
2019/09/06 Python
python实现对变位词的判断方法
2020/04/05 Python
爱他美官方海外旗舰店:Aptamil奶粉
2017/12/22 全球购物
丝芙兰波兰:Sephora.pl
2018/03/25 全球购物
美国林业供应商:Forestry Suppliers
2019/05/01 全球购物
时尚孕妇装:Ingrid & Isabel
2019/05/08 全球购物
Yahoo-PHP面试题3
2012/01/14 面试题
欢迎家长标语
2014/10/08 职场文书
2016大学迎新晚会开场白
2015/11/24 职场文书
如何撰写创业策划书
2019/06/27 职场文书
Nginx如何配置Http、Https、WS、WSS的方法步骤
2021/05/11 Servers
pytorch DataLoader的num_workers参数与设置大小详解
2021/05/28 Python