zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    【ELK】重置 elasticsearch 的超管 elastic 账号密码
    python两种获取剪贴板内容的方法
    python创建列表和向列表添加元素方法
    7道Python函数相关的练习题
    Python中的那些“坑”
    Python基础教程:copy()和deepcopy()
    Python教程:optparse—命令行选项解析器
    Python教程:面向对象编程的一些知识点总结
    第一个pypi项目发布成功
    一个Markdown文件处理程序
  • 原文地址:https://www.cnblogs.com/webpon/p/13507774.html
Copyright © 2011-2022 走看看