转载自：https://segmentfault.com/a/1190000007477785

CSS的样式分为三类：

内嵌样式：是写在标签里面的，内嵌样式只对所在的标签有效
内部样式：是写在HTML里面的，内部样式只对所在的网页有效
外部样式表：如果很多网页需要用到同样的样式，将样式写在一个以.css为后缀的CSS文件里，然后在每个需要用到这些样式的网页里引用这个CSS文件

getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值，返回的是一个CSS样式声明对象，只读
currentStyle是IE浏览器的一个属性

基础知识

众所周知，用document.getElementById('element').style.xxx可以获取element的xxx样式信息，可是它获取的只能是DOM元素内嵌样式style属性里的样式规则，对于使用外部样式表或内部样式设置的元素，就获取不到样式信息了。 
DOM标准里有个全局方法getComputedStyle，可以获取到当前对象样式信息，如：getComputedStyle(obj,null).paddingLeft，就能获取到对象的左内边距。但是IE不支持此方法，IE中获取样式的方法是currentStyle，不同于全局方法getComputedStyle，它是作为DOM元素属性存在的，如：obj.currentStyle.paddingLeft，在IE中就获取到对象的左内边距了，兼容性的写法如下：

return obj.currentStyle?obj.currentStyle.paddingLeft:getComputedStyle(obj,null).paddingLeft;
在ie浏览器中，obj.currentStyle是一个对象，而在非ie浏览器中则显示的是undefined，所以可以用以上方法来处理兼容性的问题！！
（判断obj.currentStyle为真时，执行ie的currentStyle方法；判断obj.currentStyle为假时，执行getComputedStyle(obj,null)方法）

getComputedStyle第二个参数表示的是:after、:before之类的伪类，如果不用伪类的话设置为null即可。注意的是:Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 之前，第二个参数“伪类”是必需的（如果不是伪类，设置为null），不过现在嘛，不是必需参数了
这样，就能在IE及FF中返回对象的当前样式信息了。
特别注意一点：如果要获取当前对象的颜色信息，IE返回的是16进制值，如:#ffffff，而其他浏览器返回的是rgb值，如:rgb(255,255,255)

下面是一个简单的小示例:

①一般简单使用：

<!DOCTYPE html>
<html lang="en">
<head>
　　<meta charset="UTF-8">
　　<style>
　　　　#div1{
　　　　　　width: 100px;
　　　　　　height: 100px;
　　　　　　background: red;
　　　　}
　　</style>
　　<script>
　　　　window.onload=function(){
　　　　var oDiv=document.getElementById('div1');
　　　　var btn=document.getElementById('btn');
　　　　btn.onclick=function(){
　　　　　　//currentStyle和getComputedStyle 解释为：获取计算后的样式（当前样式/最终样式）
　　　　　　if(oDiv.currentStyle){
　　　　　　　　//ie 在ie浏览器中，oDiv.currentStyle的值为对象，所以是“真”
　　　　　　　　alert(oDiv.currentStyle.width);
　　　　　　}
　　　　　　else {
　　　　　　　　//ff chrome... 在非ie浏览器中，oDiv.currentStyle的值为‘undefined’，所以为假
　　　　　　　　alert(getComputedStyle(oDiv).width);
　　　　　　}
　　　　}
　　}
　　</script>
</head>
<body>
　　<div id="div1"></div>
　　<input id="btn" type="button" value="yangshi">
</body>
</html>
 

 ②封装代码使用：

<!DOCTYPE html>
<html lang="en">
<head>
　　<meta charset="UTF-8">
　　<style>
　　　　#div1{
　　　　　　width: 100px;
　　　　　　height: 100px;
　　　　　　background: red;
　　　　}
　　</style>
　　<script>
　　　　//封装到单独的get函数中
　　　　function get(obj,arr){
　　　　　　if(obj.currentStyle){
　　　　　　　　return obj.currentStyle[arr];
　　　　　　}
　　　　　　else{
　　　　　　　　return getComputedStyle(obj)[arr];
　　　　　　}
　　　　}
　　　　window.onload=function(){
　　　　　　var oDiv=document.getElementById('div1');
　　　　　　var btn=document.getElementById('btn');
　　　　　　btn.onclick=function(){
　　　　　　　　//调用get函数
　　　　　　　　alert(get(oDiv,'width'));
　　　　　　}
　　　　}
　　</script>
</head>
<body>
　　<div id="div1"></div>
　　<input id="btn" type="button" value="yangshi">
</body>
</html>
 
③结合实例使用：
<!DOCTYPE html>
<html lang="en">
<head>
　　<meta charset="UTF-8">
　　<style>
　　　　#div1{
　　　　　　width: 100px;
　　　　　　height: 100px;
　　　　　　background-color: red；
　　　　}
　　</style>
　　<script>
　　　　function get(obj,arr){　　//传入2个参数，用于获取需要修改的元素(例如：div)，和获取需要修改的样式
　　　　　　//运用上个代码②的封装，get函数，用于获取div的css样式
　　　　　　if(obj.currentStyle){
　　　　　　　　return obj.currentStyle[arr];
　　　　　　}
　　　　　　else{
　　　　　　　　return getComputedStyle(obj)[arr];
　　　　　　}
　　　　}
　　　　function css(obj,arr,value){　　//传入3个参数，用于获取需要修改的元素(例如：div)，获取需要修改的样式，和需要修改的样式的值
　　　　　　//自定义css函数，用于处理div的css样式变化
 
　　　　　　if(arguments.length==2){
　　　　　　　　//当css函数的参数为2个时，调用get函数，输出div中的css样式
　　　　　　　　alert(get(obj,arr));
　　　　　　}
　　　　　　else if(arguments.length==3){
　　　　　　　　//当css函数的参数为3个时，执行下面代码，修改div中的css样式
　　　　　　　　obj.style[arr]=value;
　　　　　　}
　　　　}
　　　　window.onload=function(){
　　　　　　var oDiv=document.getElementById('div1');
　　　　　　var btn=document.getElementById('btn');
　　　　　　btn.onclick=function(){
　　　　　　　　//调用css函数方法
　　　　　　　　css(oDiv,'backgroundColor')
　　　　　　　　css(oDiv,'backgroundColor','green')
　　　　　　}
　　　　}
　　</script>
</head>
<body>
　　<div id="div1"></div>
　　<input id="btn" type="button" value="yangshi">
</body>
</html>

兼容性

getComputedStyle:FireFox、Opera、Safari、Chrome均支持
currentStyle:仅IE支持

getComputedStyle与currentStyle获取样式的更多相关文章

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

    今天看jQuery源码CSS部分,里面用到了currentStyle和getComputedStyle来获取外部样式. 因为elem.style.width只能获取elem的style属性里的样式,无 ...

  2. getComputedStyle与currentStyle获取元素当前的css样式

    CSS的样式分为三类: 内嵌样式:是写在标签里面的,内嵌样式只对所在的标签有效内部样式:是写在HTML里面的,内部样式只对所在的网页有效外部样式表:如果很多网页需要用到同样的样式,将样式写在一个以.c ...

  3. js获取样式、currentStyle和getComputedStyle的兼容写法

    currentStyle获取计算后的样式,也叫当前样式.最终样式.优点:可以获取元素的最终样式,包括浏览器的默认值,而不像style只能获取行间样式,所以更常用到.注意:不能获取复合样式如backgr ...

  4. style、currentStyle、getComputedStyle(不同浏览器获取css样式)区别介绍

    style.currentStyle.getComputedStyle区别介绍   样式表有三种方式 内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效. 内部样 ...

  5. 获取css样式，style、getComputedStyle及currentStyle的区别

    样式表有三种: 内嵌样式:<div id="box" style="color:red">box</div>,style写在html中的 ...

  6. JS中使用document.defaultView.getComputedStyle()、currentStyle()方法获取CSS属性值

    在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式,方法有很多很多,现在仅把我经常用的方法总结如: 1. obj.style:这个方法只能JS只能获取写在html标签中的写在style属性 ...

  7. style设置/获取样式的问题 和 offsetWidth/offsetHeight的问题

    style设置/获取样式的问题:1.js通过style方法    --加样式:加的是行间样式 oDiv.style.width="20"+'px';    --取样式:取得是行间样 ...

  8. JS之获取样式

    基本代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  9. 原生js获取样式

    js中的获取样式是在是让人头疼,为了方便兼容多个浏览器,把设置样式封装成一个函数. 函数如下: function getStyle(element, property) { var value = e ...

随机推荐

  1. 文件操作命令(del)

    del 命令: // 描述: 删除一个或多个文件.同等于 erase 命令. 相比较 rd 命令来说,del 命令只能删除文件,不能删除文件夹. // 语法: del [/p] [/f] [/s] [ ...

  2. python networkx：绘制网络图

    1.简单使用 import networkx as nx import matplotlib.pyplot as plt G = nx.Graph() G.add_edge(1,2) nx.draw_ ...

  3. 初识“FireBug”

    今天学习前端知识又一次提到“FireBug”这款插件,现在,把今天学到的一点东西简单记录下来. 什么是FireBug FireBug是一个用于网站前端开发的工具,它是FireFox浏览器的一个扩展插件 ...

  4. lumen框架学习01——引入自定义类和函数

    引入自定义的functions.php文件,首先把functions.php文件放在app的目录下,然后通过根目录的composer.json文件引入,具体操作如下图: 引入类文件也是一样,具体可参考 ...

  5. C语言学习书单

    1.C Primer Plus(第六版)(中文版)豆瓣详情 ​ C Primer Plus 最大的缺点可能就是内容太细,对于C语言讲解极为细致,但对于Sequence Point等内容并没有详细讲解. ...

  6. 移动端比较好用的滑动条 vue-slider-component

    安装: npm install vue-slider-component <template> <div> <vue-slider v-model="value ...

  7. 2019.03.25 bzoj2329: [HNOI2011]括号修复（fhq_treap）

    传送门 题意简述: 给一个括号序列,要求支持: 区间覆盖 区间取负 区间翻转 查询把一个区间改成合法括号序列最少改几位 思路: 先考虑静态的时候如何维护答案. 显然把所有合法的都删掉之后序列长这样: ...

  8. php方法传参

    带默认值的可以不传,function getColum($a=array(),$colum='id',$null=true,$colim2=null)这几个都可以不传,如果是:function get ...

  9. 使用proxyTable解决vue里的跨域问题

    由于没有跨域的接口,所以,用8080端口请求8081端口,来模拟跨域.跨域会出现下面报错. 1.找到config文件夹下index.js,在proxyTable对象里复制以下代码: proxyTabl ...

  10. Mybatis的JDBC提交设置/关闭mysql自动提交------关于mysql自动提交引发的惨剧

    学习Mybatis时提到了JDBC方式需要自己手动提交事务,如果不加session.commit会导致数据库的数据无法正常插入(程序本身又不给你报错,还装出一副我已经插入成功的样子) SqlSessi ...