转载自：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. ssh多台主机之间不用密码远程

    二.多台服务器相互无密码访问 多台服务器相互无密码访问,与两台服务器单向无密码访问的原理是一样的,只不过由于是多台服务器之间相互无密码访问,不能象两台服务器无密码登录那样直接上传,步骤如下: 1.在需 ...

  2. apache ab 结果Failed requests探究

    Failed requests: 537 (Connect: 0, Receive: 3, Length: 268, Exceptions: 266) Receive:当客户端connect成功后,并 ...

  3. Intellij IDEA 环境 tomcat 启动设置

    第一步:选择新的新的配置,我选择是Tomcat Server----->Local配置 第二步:配置Server属性 第三步:配置Deployment 第四步:配置Logs,默认配置 第五步:配 ...

  4. 面向对象(特殊成员 组合 self)

  5. PHP配置文件详解php.ini

    [PHP] ; PHP还是一个不断发展的工具,其功能还在不断地删减 ; 而php.ini的设置更改可以反映出相当的变化, ; 在使用新的PHP版本前,研究一下php.ini会有好处的 ;;;;;;;; ...

  6. tp5

    tp5.1创建模块 把build.php放在应用目录下面, 然后打开cmd, cd../../ cd phpstudy/www/tp5 php think build tp5.1控制器 return ...

  7. oracle执行计划走偏处理步骤

    -- sql执行时间select a.EXECUTIONS,a.ELAPSED_TIME,a.ELAPSED_TIME/a.EXECUTIONS/1000/1000 as 秒,a.SQL_ID,a.H ...

  8. hbase单机版安装+phoneix SQL on hbase 单节点安装

    hbase 单机安装部署及phoneix 单机安装 Hbase 下载 (需先配置jdk) https://www.apache.org/dyn/closer.lua/hbase/2.0.1/hbase ...

  9. expdp错误案例

    转自:https://www.cnblogs.com/kerrycode/p/3960328.html Oracle数据泵(Data Dump)使用过程当中经常会遇到一些奇奇怪怪的错误案例,下面总结一 ...

  10. 命令更新emacs

    sudo apt-add-repository -y ppa:adrozdoff/emacs sudo apt update sudo apt install emacs25