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

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

          
 

最后一位走来的是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”属性或方法

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

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

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

赞 (0)

相关推荐

  • JS获取CSS样式（style/getComputedStyle/currentStyle）

    CSS的样式分为三类: 内嵌样式:是写在Tag里面的,内嵌样式只对所有的Tag有效. 内部样式:是写在HTML的里面的,内部样式只对所在的网页有效. 外部样式表:如果很多网页需要用到同样的样式(Styles),将样式(Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这 些样式(Styles)的网页里引用这个CSS文件. getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值.返回的是一个CSS样式对象([object CSSStyleDeclar

  • (currentStyle)javascript为何有时用style得不到已设定的CSS的属性

    这是按第2下兰色的横条才开始出效果,就是说第1下没有获得foot.style.display=="none",可是CSS里我定义了 <style type="text/css"> #top {width:100px; background-color:#00CCFF; height:20px} #foot {width:100px; background-color: #CCCC00; height:50px; display:none} </st

  • 通用于ie和firefox的函数 GetCurrentStyle (obj, prop)

    function GetCurrentStyle (obj, prop) { if (obj.currentStyle) { return obj.currentStyle[prop]; } else if (window.getComputedStyle) { prop = prop.replace (/([A-Z])/g, "-$1"); prop = prop.toLowerCase (); return window.getComputedStyle (obj, "&

  • 获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)

    可是DOM.style这种写法只能访问<DOM style=""></DOM>,这样在标签里内置的样式,如果样式写在<style type="text/css"></style>,或者.css文件里,那么就办法读到样式了. 其实呢,还有别的方法可以读到这些样式信息,方法有两种,一种是通过document.styleSheets对象,另一种是通过"最终样式"对象.其中 IE中这个对象叫做current

  • javascript 读取内联之外的样式(style、currentStyle、getComputedStyle区别介绍)

    样式表有三种方式 内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效. 内部样式(internal Style Sheet):是写在HTML的<head></head>里面的,内部样式只对所在的网页有效. 外部样式表(External Style Sheet):如果很多网页需要用到同样的样式(Styles),将样式(Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件. 下面

  • style、 currentStyle、 runtimeStyle区别分析

    1.obj.style只能获得内嵌样式(inline Style)就是写在Tag里面的,他访问不到那些链接的外部css和在head中用<style>声明的style. 所以必须认识到在那些使用外部Css文件的页面中,如果用style赋值,如obj.style="color:red";显然效果是正确的,其中的奥秘确是只是在该对象的tag上多添加了一个style属性,按照由小到大的优先级呈现罢了. 2.obj.currentStyle就强大多了,他能够获取关于这个节点所有位置的

  • 元素未显示设置width/height时IE中使用currentStyle获取为auto

    我们知道获取元素的实际宽高在IE中可以使用currentStyle属性.但如果没有显示的去设置元素的宽高,那么使用该属性将获取不到,获取的值为auto.如下 复制代码 代码如下: <div>abcd</div> <script> var div = document.getElementsByTagName('div')[0]; alert(div.currentStyle.width); alert(div.currentStyle.height); </scr

  • getComputedStyle与currentStyle获取样式(style/class)

    大家都知道,用document.getElementById('element').style.xxx可以获取元素的样式信息,可是它获取的只是DOM元素style属性里的样式规则,对于通过class属性引用的外部样式表,就拿不到我们要的信息了. DOM标准里有个全局方法getComputedStyle,可以获取到当前对象样式规则信息,如:getComputedStyle(obj,null).paddingLeft,就能获取到对象的左内边距.但是事情还没完,万恶的IE不支持此方法,它有自己的一个实

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

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

    style.currentStyle.getComputedStyle区别介绍 样式表有三种方式 内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效. 内部样式(internal Style Sheet):是写在HTML的里面的,内部样式只对所在的网页有效. 外部样式表(External Style Sheet):如果很多网页需要用到同样的样式(Styles),将样式(Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这些样式(Styl

  • python爬虫学习笔记之pyquery模块基本用法详解

    本文实例讲述了python爬虫学习笔记之pyquery模块基本用法.分享给大家供大家参考,具体如下: 相关内容: pyquery的介绍 pyquery的使用 安装模块 导入模块 解析对象初始化 css选择器 在选定元素之后的元素再选取 元素的文本.属性等内容的获取 pyquery执行DOM操作.css操作 Dom操作 CSS操作 一个利用pyquery爬取豆瓣新书的例子 首发时间:2018-03-09 21:26 pyquery的介绍 pyquery允许对xml.html文档进行jQuery查询

  • Python学习笔记之迭代器和生成器用法实例详解

    本文实例讲述了Python学习笔记之迭代器和生成器用法.分享给大家供大家参考,具体如下: 迭代器和生成器 迭代器 每次可以返回一个对象元素的对象,例如返回一个列表.我们到目前为止使用的很多内置函数(例如 enumerate)都会返回一个迭代器. 是一种表示数据流的对象.这与列表不同,列表是可迭代对象,但不是迭代器,因为它不是数据流. 生成器 是使用函数创建迭代器的简单方式.也可以使用类定义迭代器 下面是一个叫做 my_range 的生成器函数,它会生成一个从 0 到 (x - 1) 的数字流:

  • Python学习笔记之Break和Continue用法分析

    本文实例讲述了Python学习笔记之Break和Continue用法.分享给大家供大家参考,具体如下: Python 中的Break 和 Continue break:控制何时循环应该结束 continue: 跳过循环的一次迭代 Break 和 Continue[示例练习] 用 break 语句写一个循环,用于创建刚好长 140 个字符的字符串 news_ticker.你应该通过添加 headlines 列表中的新闻标题创建新闻提醒,在每个新闻标题之间插入空格.如果有必要的话,从中间截断最后一个

  • ES6学习笔记之let与const用法实例分析

    本文实例讲述了ES6学习笔记之let与const用法.分享给大家供大家参考,具体如下: 在ES6中不是var,而是通过let来声明变量,用const来声明常量,有如下一些不同: 1.let与const作用域只限于当前代码块{},而var则没有这种限制. 2.使用let.const申明的变量作用域不会被提升.例如: console.log(str); var str="var declare"; 控制台输出undefined:因为变量申明是在任意代码执行前处理的,在代码区中任意地方声明变

  • vue学习笔记之slot插槽基本用法实例分析

    本文实例讲述了vue学习笔记之slot插槽基本用法.分享给大家供大家参考,具体如下: 不使用插槽,在template中用v-html解析父组件传来的带有标签的content <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vu

  • Python学习笔记之Zip和Enumerate用法实例分析

    本文实例讲述了Python Zip和Enumerate用法.分享给大家供大家参考,具体如下: Python 中的 Zip zip的作用:可以在处理循环时用到,返回一个将多个可迭代对象组合成一个元组序列的迭代器.每个元组都包含所有可迭代对象中该位置的元素. my_zip = list(zip(['a', 'b', 'c'], [1, 2, 3])) print(my_zip) # [('a', 1), ('b', 2), ('c', 3)] 正如 range() 一样,我们需要将其转换为列表或使用

  • smarty学习笔记之常见代码段用法总结

    本文实例讲述了smarty常见代码段.分享给大家供大家参考,具体如下: 1. <select > {html_options values=$cust_ids selected=$customer_id output=$cust_names} </select> 说明:生成下拉菜单.values=一个数组,数组元素为列表值 selected=一个值,这个是默认的列 表值 output=一个数组,数组元素为显示的列表值 {html_checkboxes values=$cust_id

  • jQuery学习笔记之Ajax用法实例详解

    本文实例讲述了jQuery学习笔记之Ajax用法.分享给大家供大家参考,具体如下: 一.Ajax请求 1.jQuery.ajax(options) 通过 HTTP 请求加载远程数据.jQuery 底层 AJAX 实现.简单易用的高层实现见 .get,.post 等. .ajax()返回其创建的XMLHttpRequest对象.大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求..ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息.详细参数选项见下.

  • Go语言学习笔记之反射用法详解

    本文实例讲述了Go学习笔记之反射用法.分享给大家供大家参考,具体如下: 一.类型(Type) 反射(reflect)让我们能在运行期探知对象的类型信息和内存结构,这从一定程度上弥(mi)补了静态语言在动态行为上的不足.同时,反射还是实现元编程的重要手段. 和 C 数据结构一样,Go 对象头部并没有类型指针,通过其自身是无法在运行期获知任何类型相关信息的.反射操作所需要的全部信息都源自接口变量.接口变量除存储自身类型外,还会保存实际对象的类型数据. func TypeOf(i interface{

随机推荐