前端学习笔记style,currentStyle,getComputedStyle的用法与区别


Posted in Javascript onMay 28, 2016

style、currentStyle、getComputedStyle区别介绍

样式表有三种方式

内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效。
内部样式(internal Style Sheet):是写在HTML的里面的,内部样式只对所在的网页有效。
外部样式表(External Style Sheet):如果很多网页需要用到同样的样式(Styles),将样式(Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件。 最常用的是style属性,在JavaScript中,通过document.getElementById(id).style.XXX就可以获取到XXX的值,但意外的是,这样做只能取到通过内嵌方式设置的样式值,即style属性里面设置的值。

解决方案:引入currentStyle,runtimeStyle,getComputedStyle style 标准的样式,可能是由style属性指定的!

runtimeStyle 运行时的样式!如果与style的属性重叠,将覆盖style的属性!
currentStyle 指 style 和 runtimeStyle 的结合! 通过currentStyle就可以获取到通过内联或外部引用的CSS样式的值了(仅限IE) 如:document.getElementById("test").currentStyle.top

要兼容FF,就得需要getComputedStyle 出马了

注意: getComputedStyle是firefox中的, currentStyle是ie中的. 比如说

<style>
#mydiv {
     width : 300px;
}
</style>

则:

var mydiv = document.getElementById('mydiv');
if(mydiv.currentStyle) {
      var width = mydiv.currentStyle['width'];
      alert('ie:' + width);
} else if(window.getComputedStyle) {
      var width = window.getComputedStyle(mydiv , null)['width'];
      alert('firefox:' + width);
}

另外在FF下还可以通过下面的方式获取

document.defaultView.getComputedStyle(mydiv,null).width;
window.getComputedStyle(mydiv , null).width;

以下是一些补充:

在看博客的时候看到了这个这3个家伙-style,currentStyle,getComputedStyle。以前学习的时候没碰到过,既然现在碰到了,就小小的研究了一下。发现了些许问题,也许是时代久远,也有可能是自己孤陋寡闻,但它实实在在的让我感到迷惑。虽说陶渊明说,读书不求甚解,但作为想成为一名优秀前端的前端开发者,还是要弄个明白,要不然睡不着觉啊!

先做个铺垫吧。说说层叠样式表的三种形式(三种的叫法不一,按照各自的习惯):

一。内联样式:在HTML标签用style属性设置。如:

1 <p style="color:#f90;">这是内联样式</p>

二。嵌入样式:通过<head>标签内通过<style>标签设置。如:

<style type="text/css">
   /*这是嵌入样式*/
   .stuff{color:#f90}
</style>

三。外部样式:通过<link>标签设置。如:

<link rel="stylesheet" href="path/style.css" type="text/css">
 ============================================
 /*外部样式*/
 @charset "UTF-8";
 .stuff{color:#f90;}

推荐使用第三种方式。
下面该三位主角上场了。
第一位向我们缓缓走来的是style。它的使用方法是obj.style.attr;某位影评人在他的博客中评价道:
style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的。
用下面代码验证了一下,确实如上所说。我使用了三种样式,得到的结果都是内联样式的值。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>无标题文档</title>
 <link href="style.css" rel="stylesheet" type="text/css"/>
 <style type="text/css">
   #stuff{width:300px;}
 </style>
<script type="text/javascript">
  window.onload = function(){
    var oDiv = document.getElementById('stuff');
    console.log(oDiv.style.width);
    //alert(oDiv.style.width);
  };
  
</script>
</head>

<body>
  <div id="stuff" style="width:400px;"></div>
</body>
</html>

外链样式表style.css:

1 @charset "utf-8"; 2 /* CSS Document */ 3 #stuff{width:100px;}

得到的结果是400px.

前端学习笔记style,currentStyle,getComputedStyle的用法与区别

紧跟在style之后的是currentStyle,据说它有个强大的后盾MS,也就是说这家伙只能在IE浏览器里能用。其他的不好使。它的使用方法是window.currentStyle["attr']或者window.currentStyle.attr。在IE中获取内嵌样式表中width的属性值为300px,在Mozilla Firefox中无法通过。

前端学习笔记style,currentStyle,getComputedStyle的用法与区别          
 
前端学习笔记style,currentStyle,getComputedStyle的用法与区别                    

最后一位走来的是getComputedStyle,它的用法是window.getComputedStyle(ob, pseudoElt)["attr']或window.getComputedStyle(ob, pseudoElt).attr。其中,pseudoElt表示如 :after,:before之类的伪类,如果不用伪类的话设置为null即可。

还是那位影评人评论道:

getComputedStyle同currentStyle作用相同,但是适用于FF、opera、safari、chrome。

抱着怀疑的态度,我又验证了一下,果然IE7,IE8,IE9都报错了:

对象不支持“getComputedStyle”属性或方法

前端学习笔记style,currentStyle,getComputedStyle的用法与区别

浏览器的兼容性问题。浏览器的兼容性问题对于前端开发者来说确实是一个头疼的问题,尤其是罪魁祸首IE6。但是我们不能惧而远之,而是见招拆招,兵来将挡水来土掩。在和它战斗的过程中你会得到很多的乐趣,以及战胜它之后的成就感!!!

另外说一点:getComputedStyle和currentStyle只能获取属性值,无法设置属性。如果想设置属性值,可是使用ob.style.attr.

有不对的地方请大家多多指教,在此先谢过了!!

Javascript 相关文章推荐
javascript编程起步(第三课)
Feb 27 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
Dec 04 Javascript
自动刷新网页,自动刷新当前页面,JS调用
Jun 24 Javascript
做好七件事帮你提升jQuery的性能
Feb 06 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
Mar 18 Javascript
javascript中利用柯里化函数实现bind方法
Apr 29 Javascript
模板视图和AngularJS之间冲突的解决方法
Nov 22 Javascript
javascript中href和replace的比较(详解)
Nov 25 Javascript
微信小程序 picker 组件详解及简单实例
Jan 10 Javascript
微信小程序实现简单input正则表达式验证功能示例
Nov 30 Javascript
详解ES6语法之可迭代协议和迭代器协议
Jan 13 Javascript
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
浅谈jQuery 中的事件冒泡和阻止默认行为
May 28 #Javascript
jquery取消事件冒泡的三种方法(推荐)
May 28 #Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
May 28 #Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
May 28 #Javascript
jQuery Mobile动态刷新页面样式的实现方法
May 28 #Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
May 28 #Javascript
jQuery操作动态生成的内容的方法
May 28 #Javascript
You might like
第4章 数据处理-php数组的处理-郑阿奇
2011/07/04 PHP
PHP提示Notice: Undefined variable的解决办法
2012/11/24 PHP
php中mkdir函数用法实例分析
2014/11/15 PHP
PHP程序员不应该忽略的3点
2015/10/09 PHP
简单的php+mysql聊天室实现方法(附源码)
2016/01/05 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
PHP简单实现二维数组赋值与遍历功能示例
2017/10/19 PHP
top.location.href 没有权限 解决方法
2008/08/05 Javascript
JS 日期验证正则附asp日期格式化函数
2009/09/11 Javascript
jquery parent和parents的区别分析
2013/10/02 Javascript
JavaScript排序算法之希尔排序的2个实例
2014/04/04 Javascript
Nodejs学习笔记之入门篇
2015/04/16 NodeJs
js实现点击向下展开的下拉菜单效果代码
2015/09/01 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
2015/10/27 Javascript
初步使用Node连接Mysql数据库
2016/03/03 Javascript
如何检测JavaScript的各种类型
2016/07/30 Javascript
JavaScript中的对象继承关系
2016/08/01 Javascript
一个炫酷的Bootstrap导航菜单
2016/12/28 Javascript
jQuery实现弹出窗口弹出div层的实例代码
2017/01/09 Javascript
浅谈vue.js中v-for循环渲染
2017/07/26 Javascript
微信小程序中使用自定义图标(阿里icon)的方法
2018/08/20 Javascript
新手快速入门微信小程序组件库 iView Weapp
2019/06/24 Javascript
[01:34]DAC2018主赛事第四日五佳镜头 Gh巨牙海民助Miracle-死里逃生
2018/04/07 DOTA
Python爬虫框架Scrapy安装使用步骤
2014/04/01 Python
pandas 对series和dataframe进行排序的实例
2018/06/09 Python
将labelme格式数据转化为标准的coco数据集格式方式
2020/02/17 Python
基于Python脚本实现邮件报警功能
2020/05/20 Python
pytorch查看模型weight与grad方式
2020/06/24 Python
html5跳转小程序wx-open-launch-weapp踩坑
2020/12/02 HTML / CSS
Yahoo-PHP面试题1
2016/07/20 面试题
升职自荐信范文
2013/10/05 职场文书
施工资料员的岗位职责
2013/12/22 职场文书
房地产还款计划书
2014/01/10 职场文书
北京青年观后感
2015/06/15 职场文书
爱国主题班会教案
2015/08/14 职场文书
银行求职信范文
2019/05/13 职场文书