转载自：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. JSP 页面跳转中的参数传递

    1. 从一个 JSP 页面跳转到另一个 JSP 页面时的参数传递 1)使用 request 内置对象获取客户端提交的信息 2)使用 session 对象获取客户端提交的信息 3)利用隐藏域传递数据 4 ...

  2. Vue 制作简易计算器

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. target = e.target || e.srcElement(转载)

    //鼠标点击出现下拉菜单,点其他地方,缩回去. document.addEventListener("mousedown", function(e) { var target = ...

  4. github菜鸟入门

    github菜鸟入门教程 闲来无事,研究了下github的玩法,完毕总结:简单好玩,上档次! 一.首先注册github的账号 二.下载安装git 三.新建仓库 1.点击右上方的+号选择首项新建仓库 2 ...

  5. Combo控件失效

    问题:点击combo控件,下拉选项不显示. 解决:注释HandleMessage中的MessageHandler相关语句,正常下拉.

  6. Educational Codeforces Round 58 (Rated for Div. 2) D 树形dp + 数学

    https://codeforces.com/contest/1101/problem/D 题意 一颗n个点的树,找出一条gcd>1的最长链,输出长度 题解 容易想到从自底向长转移 因为只需要g ...

  7. Buffer.h

    #ifndef __NOXIMBUFFER_H__ #define __NOXIMBUFFER_H__ #include <cassert> #include <queue> ...

  8. Java中十六进制转换 Integer.toHexString()

    为了显示一个byte型的单字节十六进制(两位十六进制表示)的编码,请使用: Integer.toHexString((byteVar & 0x000000FF) | 0xFFFFFF00).s ...

  9. fromdata上传多个文件

    function upload_single_file(value){ if(value==''){ layer.msg('请添加文件',{time:1500}) }else{ var formDat ...

  10. vue中集成pdfjs自定义分页

    <template> <div id="div_read_area_scrool" class="no-scrollbar--x" :styl ...