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 相关文章推荐
懒就要懒到底——鼠标自动点击(含时间判断)
Feb 20 Javascript
JS实现网页Div层Clone拖拽效果
Sep 26 Javascript
Angularjs 滚动加载更多数据
Mar 17 Javascript
使用jQuery制作浮动工具栏的实例分享
May 13 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
Dec 27 Javascript
Vue中如何实现proxy代理
Apr 20 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
vue-cli项目无法用本机IP访问的解决方法
Sep 20 Javascript
灵活使用console让js调试更简单的方法步骤
Apr 23 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
Jul 19 Javascript
微信小程序静默登录的实现代码
Jan 08 Javascript
Element Alert警告的具体使用方法
Jul 27 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/12/04 PHP
PHP将整个网站生成HTML纯静态网页的方法总结
2012/02/05 PHP
php中的Base62类(适用于数值转字符串)
2013/08/12 PHP
配置php.ini实现PHP文件上传功能
2014/11/27 PHP
简单理解PHP的面向对象编程方式
2016/05/17 PHP
ThinkPHP使用getlist方法实现数据搜索功能示例
2017/05/08 PHP
window.open的功能全解析
2006/10/10 Javascript
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
2007/05/07 Javascript
appendChild() 或 insertBefore()使用与区别介绍
2013/10/11 Javascript
node.js中的querystring.escape方法使用说明
2014/12/10 Javascript
jQuery中replaceAll()方法用法实例
2015/01/16 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
2015/04/06 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
2015/08/07 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
2015/08/31 Javascript
jquery遍历table的tr获取td的值实现方法
2016/05/19 Javascript
JS模拟实现方法重载示例
2016/08/03 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
2016/12/12 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
2017/01/21 Javascript
微信小程序 JS动态修改样式的实现代码
2017/02/10 Javascript
浅谈Node.js之异步流控制
2017/10/25 Javascript
浅谈Vue 数据响应式原理
2018/05/07 Javascript
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
2018/09/19 Javascript
Openlayers实现地图全屏显示
2020/09/28 Javascript
Python datetime时间格式化去掉前导0
2014/07/31 Python
用Python编写一个简单的FUSE文件系统的教程
2015/04/02 Python
python实现最大优先队列
2019/08/29 Python
Python应用实现处理excel数据过程解析
2020/06/19 Python
python 调用Google翻译接口的方法
2020/12/09 Python
python基于爬虫+django,打造个性化API接口
2021/01/21 Python
Vans荷兰官方网站:美国南加州的原创极限运动潮牌
2018/01/23 全球购物
有个性的自我评价范文
2013/11/15 职场文书
副校长个人对照检查材料思想汇报
2014/10/04 职场文书
2014年节能工作总结
2014/12/18 职场文书
javascript条件式访问属性和箭头函数介绍
2021/11/17 Javascript
SpringCloud项目如何解决log4j2漏洞
2022/04/10 Java/Android
Valheim服务器 Mod修改安装教程 【ValheimPlus】
2022/12/24 Servers