前端学习笔记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 相关文章推荐
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
Apr 29 Javascript
移动端滑动插件Swipe教程
Oct 16 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
Oct 26 Javascript
详解vue父子组件间传值(props)
Jun 29 Javascript
vue中的scope使用详解
Oct 29 Javascript
JS严格模式知识点总结
Feb 27 Javascript
20个最常见的jQuery面试问题及答案
May 23 jQuery
Vue使用axios出现options请求方法
May 30 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
Nov 04 Javascript
vue项目中极验验证的使用代码示例
Dec 03 Javascript
基于JavaScript实现猜数字游戏代码实例
Jul 30 Javascript
实现vuex原理的示例
Oct 21 Javascript
浅谈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
以文件形式缓存php变量的方法
2015/06/26 PHP
php实现图片上传、剪切功能
2016/05/07 PHP
完美的php分页类
2017/10/24 PHP
PHP数字金额转换成中文大写显示
2019/01/05 PHP
浅析PHP echo 和 print 语句
2020/06/30 PHP
JavaScript基本编码模式小结
2012/05/23 Javascript
js实现动态改变字体大小代码
2014/01/02 Javascript
实例讲解JS中数组Array的操作方法
2014/05/09 Javascript
2014最热门的JavaScript代码高亮插件推荐
2014/11/25 Javascript
javascript中callee与caller的区别分析
2015/04/20 Javascript
js实现非常简单的焦点图切换特效实例
2015/05/07 Javascript
jQuery获取select选中的option的value值实现方法
2016/08/29 Javascript
javascript轮播图算法
2016/10/21 Javascript
Vue2.x中的父组件传递数据至子组件的方法
2017/05/01 Javascript
浅谈vue项目如何打包扔向服务器
2018/05/08 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
2019/07/19 Javascript
nodejs读取图片返回给浏览器显示
2019/07/25 NodeJs
vue改变循环遍历后的数据实例
2019/11/07 Javascript
[02:00]最后,我终于出了辉耀
2018/03/27 DOTA
[02:49:21]2019完美盛典全程录像
2019/12/08 DOTA
解析Python中的异常处理
2015/04/28 Python
python中管道用法入门实例
2015/06/04 Python
windows下python安装小白入门教程
2018/09/18 Python
NET程序员上机面试题
2015/05/23 面试题
武汉某公司的C#笔试题面试题
2015/12/25 面试题
介绍一下MYSQL常用的优化技巧
2012/10/25 面试题
自我评价优秀范文分享
2013/11/30 职场文书
《跨越百年的美丽》教学反思
2014/02/11 职场文书
各营销点岗位职责范本
2014/03/05 职场文书
个人社会实践自我鉴定
2014/03/24 职场文书
《天安门广场》教学反思
2014/04/23 职场文书
校园会短篇的广播稿
2014/10/21 职场文书
2015年国庆节新闻稿
2015/07/18 职场文书
css3实现背景图片颜色修改的多种方式
2021/04/13 HTML / CSS
Python如何导出导入所有依赖包详解
2021/06/08 Python
java实现对Hadoop的操作
2021/07/01 Java/Android