JavaScript读取元素的样式style、getComputedStyle()、currentStyle

style方法

style对象代表一个单独的样式声明,可以从应用样式的文档元素访问Style对象。style对象获取的是内联样式获,取不了外部的样式,即这个方法只能JS只能获取写在html标签中的写在style属性中的值(style=”…”),而无法获取定义在<style type="text/css">里面的属性。

注意:currentStyle属性和getComputedStyle属性不能设置属性,只能获取!!

getComputedStyle()方法

getComputedStyle()属于window对象

document.defaultView.getComputedStyle(element[,pseudo-element]);  
 
(备注)defaultView:在许多在线的演示代码中, getComputedStyle 是通过 document.defaultView 对象来调用的。 
大部分情况下,这是不需要的, 可以直接通过 window 对象调用。但有一种情况,你必需要使用 defaultView, 
那是在 Firefox 3.6 上访问子框架内的样式 (iframe)。除了在 IE8 浏览器中 document.defaultView === window 返回的是 false 外,
其他的浏览器(包括 IE9 )返回的都是 true。所以后面直接使用 window 就好,不用在输入那么长的代码了。
 
或者
 
window.getComputedStyle(element[,pseudo-element]);

getComputedStyle(元素,[伪类])第二个参数是可选的,通常会将其设为null;返回值为一个对象,包含该元素的所有样式属性

getComputedStyle 返回的对象是 CSSStyleDeclaration 类型的对象。取数据的时候可以直接按照属性的取法去取数据,例如 style.backgroundColor。需要注意的是,返回的对象的键名是 css 的驼峰式写法,background-color -> backgroundColor。

注意:float 是 JS 的保留关键字。根据 DOM2 级的规范,取元素的 float 的时候应该使用 cssFloat。其实 chrome 和 Firefox 是支持 float 属性的,也就是说可以直接使用。

兼容性问题:在 Chrome 、Firefox 、IE 9+是支持该属性的,IE 8并不支持该属性。 IE 8 支持的 element.currentStyle 属性,这个属性返回的值和 getComputedStyle 的返回基本一致,只是在 float 的支持上,IE 8 支持的是 styleFloat。

currentStyle方法

Element.currentStyle 是一个与Window.getComputedStyle()方法功能相同的属性。这个属性实现在旧版本的IE浏览器中。语法:

element.currentStyle[相应元素名称];
 
或者
 
element.currentStyle.相应元素名称;

浏览器获取适相应配样式方法

    function styleDecide(obj,name) {
        if (window.getComputedStyle){
          //适配Chrome、火狐、IE9以上版本浏览器
          return getComputedStyle(obj,null)[name];
        } else {
          //适配IE8浏览器
          return obj.currentStyle[name];
        }
      }

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style type="text/css">
    .ban{
      color: aqua;
      font-size: 32px;
      background-color: #888888;
      border: none;
      width: 300px;
      height: 100px;
      text-align: center;
      margin: auto;
    }
  </style>
  <script type="text/javascript">
    window.onload = function () {
      var but_submit = document.getElementById("but_submit");
      var p_submit = document.getElementById("p_submit");
      but_submit.onmouseover = function () {
        //document.write(but_submit.value);
        p_submit.innerHTML = but_submit.value;
        //but_submit.currentStyle.color;
        p_submit.style.color = styleDecide(but_submit,"color");
      };
 
      //浏览器获取适配样式
      function styleDecide(obj,name) {
        if (window.getComputedStyle){
          //适配Chrome、火狐、IE9以上版本浏览器
          return getComputedStyle(obj,null)[name];
        } else {
          //适配IE8浏览器
          return obj.currentStyle[name];
        }
      }
    };
  </script>
</head>
<body>
<input id="but_submit" class="ban" type="submit" value="登录">
<p id="p_submit"></p>
</body>
</html>

转载于:https://blog.csdn.net/qq_36761831/article/details/95393694?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-4.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-4.channel_param

原文地址:https://www.cnblogs.com/webpon/p/13507774.html