前端学习笔记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 相关文章推荐
巧用jquery解决下拉菜单被Div遮挡的相关问题
Feb 13 Javascript
一个判断抢购时间是否到达的简单的js函数
Jun 23 Javascript
angularJS中router的使用指南
Feb 09 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
Sep 14 Javascript
Node.js 应用跑得更快 10 个技巧
Apr 03 Javascript
js中利用cookie实现记住密码功能
Aug 20 Javascript
微信小程序 支付简单实例及注意事项
Jan 06 Javascript
基于JavaScript实现本地图片预览
Feb 08 Javascript
详解Javascript获取缓存和清除缓存API
May 25 Javascript
解决vue 项目引入字体图标报错、不显示等问题
Sep 01 Javascript
微信小程序 wxParse插件显示视频问题
Sep 27 Javascript
Vue router配置与使用分析讲解
Dec 24 Vue.js
浅谈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用身份证号获取星座和生肖的方法
2013/11/07 PHP
js或css文件后面跟参数的原因说明
2010/01/09 Javascript
javascript 拖放效果实现代码
2010/01/22 Javascript
jquery 新浪网易的评论块制作
2010/07/01 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
2013/03/18 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
2013/11/08 Javascript
js清空表单数据的两种方式(遍历+reset)
2014/07/18 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
2015/06/19 Javascript
基于jquery实现下拉框美化特效
2016/02/02 Javascript
学习使用bootstrap3栅格系统
2016/04/12 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
2016/11/24 Javascript
JS生成和下载二维码的代码
2016/12/07 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
2017/06/15 Javascript
JS使用正则表达式找出最长连续子串长度
2017/10/26 Javascript
详解plotly.js 绘图库入门使用教程
2018/02/23 Javascript
Vue SSR 组件加载问题
2018/05/02 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
2018/07/13 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
2018/10/07 Javascript
vue组件命名和props命名代码详解
2019/09/01 Javascript
Python中asyncore的用法实例
2014/09/29 Python
Python使用urllib2模块抓取HTML页面资源的实例分享
2016/05/03 Python
Python卸载模块的方法汇总
2016/06/07 Python
Python 数据结构之旋转链表
2017/02/25 Python
python-opencv在有噪音的情况下提取图像的轮廓实例
2017/08/30 Python
在Python中居然可以定义两个同名通参数的函数
2019/01/31 Python
Python实现RGB与HSI颜色空间的互换方式
2019/11/27 Python
python实现12306登录并保存cookie的方法示例
2019/12/17 Python
通过 Python 和 OpenCV 实现目标数量监控
2020/01/05 Python
英国乡村时尚和宠物用品专家:Pet & Country
2018/07/02 全球购物
维氏瑞士军刀英国网站:Victorinox英国
2019/07/04 全球购物
北京银河万佳Java面试题
2012/03/21 面试题
超市国庆节促销方案
2014/02/20 职场文书
学生会主席竞聘书
2014/03/31 职场文书
学校党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
Python序列化与反序列化相关知识总结
2021/06/08 Python
CSS 鼠标选中文字后改变背景色的实现代码
2023/05/21 HTML / CSS