前端学习笔记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+绝对定位的实现
May 08 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
May 27 Javascript
Window.Open如何在同一个标签页打开
Jun 20 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
Dec 08 Javascript
javascript实现设置、获取和删除Cookie的方法
Jun 01 Javascript
谈一谈JS消息机制和事件机制的理解
Apr 14 Javascript
canvas实现刮刮卡效果
Mar 14 Javascript
vue组件中使用iframe元素的示例代码
Dec 13 Javascript
vue将毫秒数转化为正常日期格式的实例
Sep 16 Javascript
vue组件间通信六种方式(总结篇)
May 15 Javascript
js实现限定区域范围拖拉拽效果
Nov 20 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
Nov 30 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下目前为目最全的CURL中文说明
2010/08/01 PHP
php带抄送和密件抄送的邮件发送方法
2015/03/20 PHP
高质量PHP代码的50个实用技巧必备(下)
2016/01/22 PHP
PHP程序中的文件锁、互斥锁、读写锁使用技巧解析
2016/03/21 PHP
在textarea中屏蔽js的某个function的javascript代码
2007/04/20 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
Node.js开发之访问Redis数据库教程
2015/01/14 Javascript
jquery实现图片随机排列的方法
2015/05/04 Javascript
JS组件Form表单验证神器BootstrapValidator
2016/01/26 Javascript
Bootstrap CSS组件之按钮组(btn-group)
2016/12/17 Javascript
常用的js方法合集
2017/03/10 Javascript
纯js的右下角弹窗实例
2017/03/12 Javascript
JavaScript基于面向对象实现的猜拳游戏
2018/01/03 Javascript
解决vue-cli3 使用子目录部署问题
2018/07/19 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
2019/12/21 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
2020/06/01 Javascript
JS判断数组四种实现方法详解
2020/06/29 Javascript
使用Python脚本在Linux下实现部分Bash Shell的教程
2015/04/17 Python
解决nohup重定向python输出到文件不成功的问题
2018/05/11 Python
Python API 自动化实战详解(纯代码)
2019/06/11 Python
Flask框架学习笔记之表单基础介绍与表单提交方式
2019/08/12 Python
python读取多层嵌套文件夹中的文件实例
2020/02/27 Python
Python如何实现定时器功能
2020/05/28 Python
python 模拟登陆github的示例
2020/12/04 Python
纯css3实现的鼠标悬停动画按钮
2014/12/23 HTML / CSS
HTML5的文档结构和新增标签完全解析
2017/04/21 HTML / CSS
html5 canvas-1.canvas介绍(hello canvas)
2013/01/07 HTML / CSS
莱德杯高尔夫欧洲官方商店:Ryder Cup Shop
2019/08/14 全球购物
毕业生找工作的求职信范文
2013/12/24 职场文书
护理专业自我鉴定
2014/01/30 职场文书
房地产项目建议书
2014/03/12 职场文书
毕业生代领毕业材料的授权委托书
2014/09/29 职场文书
2016年员工年度考核评语
2015/12/02 职场文书
html5移动端禁止长按图片保存的实现
2021/04/20 HTML / CSS
Java spring单点登录系统
2021/09/04 Java/Android
vue如何使用模拟的json数据查看效果
2022/03/31 Vue.js