前端学习笔记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静态的动态
Sep 18 Javascript
在图片上显示左右箭头类似翻页的代码
Mar 04 Javascript
javascript字符串替换及字符串分割示例代码
Dec 12 Javascript
jQuery插件slides实现无缝轮播图特效
Apr 17 Javascript
jquery判断当前浏览器的实现代码
Nov 07 Javascript
javascript作用域链(Scope Chain)用法实例解析
Nov 30 Javascript
再次谈论Javascript中的this
Jun 23 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
Jan 18 Javascript
JavaScript选择排序算法原理与实现方法示例
Aug 06 Javascript
vue页面切换过渡transition效果
Oct 08 Javascript
vue把输入框的内容添加到页面的实例讲解
Nov 11 Javascript
vue在响应头response中获取自定义headers操作
Jul 24 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
再说下636单管机
2021/03/02 无线电
多文件上载系统完整版
2006/10/09 PHP
php中socket的用法详解
2014/10/24 PHP
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
2014/10/29 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
PHP异步进程助手async-helper
2018/02/05 PHP
php设计模式之职责链模式定义与用法经典示例
2019/09/19 PHP
让插入到 innerHTML 中的 script 跑起来的实现代码
2006/07/01 Javascript
javascript 动态添加事件代码
2008/11/30 Javascript
让AJAX不依赖后端接口实现方案
2012/12/03 Javascript
JS获取后台Cookies值的小例子
2013/03/04 Javascript
使图片旋转的3种解决方案
2013/11/21 Javascript
文本域中换行符的替换示例
2014/03/04 Javascript
js身份证判断方法支持15位和18位
2014/03/18 Javascript
JS实现仿QQ效果的三级竖向菜单
2015/09/25 Javascript
JS截取与分割字符串常用技巧总结
2015/11/10 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
2016/07/12 Javascript
JavaScript计算器网页版实现代码分享
2016/07/15 Javascript
详解基于webpack搭建react运行环境
2017/06/01 Javascript
详解javascript设计模式三:代理模式
2019/03/25 Javascript
微信小程序实现弹出菜单动画
2019/06/21 Javascript
vue解决花括号数据绑定不成功的问题
2019/10/30 Javascript
微信小程序实现点击生成随机验证码
2020/09/09 Javascript
在vue项目中封装echarts的步骤
2020/12/25 Vue.js
python if not in 多条件判断代码
2016/09/21 Python
Django数据库操作的实例(增删改查)
2017/09/04 Python
谈谈python中GUI的选择
2018/03/01 Python
python实现爬取百度图片的方法示例
2019/07/06 Python
利于python脚本编写可视化nmap和masscan的方法
2020/12/29 Python
美国东北部户外服装和设备零售商:Eastern Mountain Sports
2016/10/05 全球购物
学术会议欢迎词
2014/01/09 职场文书
工作简报格式范文
2015/07/21 职场文书
Css预编语言及区别详解
2021/04/25 HTML / CSS
Go语言中的UTF-8实现
2021/04/26 Golang
MySQL子查询中order by不生效问题的解决方法
2021/08/02 MySQL
Hive导入csv文件示例
2022/06/25 数据库