转载自：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. 无符号1byte转int

    在java基本类型中byte是有正负之分,它的取值范围-128到127,有时候在网络编程里我们只需要正数,于是会约定1byte是无符号的,它的取值范围在255-0.那么我们怎么将无符号的1byte转为 ...

  2. zabbix监控配置与邮件告警

    添加主机与主机组 进入web页面,在 配置-主机群组,创建主机群组 在 配置-主机,新建主机 在可见的名称中建议填写为类似 主机类型-主机名-IP或域名 的格式,如Web-Hyrule001-192. ...

  3. 能量模型与softmax和RBM以及正态分布的关联

    上面一篇文章中探讨了玻尔兹曼分布的起源: 在不清楚目标的真实分布,也不知道样本分布的时候,假设任意输入与输出组合都是同样可能发生的,这样是最公平,最无偏的先验. 因为无法直接统计出给定任意一种输入x, ...

  4. require.js模块化

    require.js简单来说就是把js代码分装模块化了 模块化 模块就是实现特定功能的一组方法.只要把不同的函数(以及记录状态的变量)简单地放在一起,就算是一个模块. 我拿一个运动框架来解释一下req ...

  5. 解决vs验证控件报错” WebForms UnobtrusiveValidationMode 需要“jquery”ScriptResourceMapping。请添加一个名为 jquery (区分大小写)的 ScriptResourceMapping”问题

    将RequiredFieldValidator的 EnableClientScript属性设置成 False 适用于大多验证控件

  6. 计算机爱好者协会技术贴markdown第一期

    本周爱酱给大家带来的是markdown的介绍和使用哦~ Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式.由于是纯文本,所以可移植性特 ...

  7. nginx上传文件时 nginx 413 Request Entity Too Large 错误

    产生原因: 上传文件的大小超出了 Nginx 允许的最大值,默认是1M: 解决方法: 修改Nginx的配置文件(一般是:nginx/nginx.conf),在 http{} 段中增大nginx上传文件 ...

  8. shell awk处理过滤100万条数据

    背景: 100万条数据.格式如下: ID 地址 1895756546931805 安徽省六安市裕安区固镇镇佛俺村柳树队5758 安徽省蒙城县岳坊镇胡寨村小组小胡寨庄6号 183494167409969 ...

  9. 第45章：MongoDB-集群--Sharding(分片)--分片的管理

    ①列出所有的Shard db.runCommand({“listshards”:1}); ②查看分片信息 db.printShardingStatus(); ③判断是否分片 db.runCommand ...

  10. git遇到的问题-- Another git process seems to be running in this repository

    执行git add .时,报错 fatal: Unable to create '/Users/lily/ForWork/forReBaomai/bm-fe/.git/index.lock': Fil ...