master

分支 (2)

管理

管理

master

Devlop

java-script-notes
/
108.读取元素的样式.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      #box1 {
          /*width: 200px;*/
          height: 200px;
          background-color: red;
      }
  </style>

  <script>
    window.onload = function () {
      // 点击按钮以后读取box1的样式
      var box1 = document.getElementById("box1");
      var btn01 = document.getElementById("btn01");
      btn01.onclick = function () {
        //读取box1的宽度
        // alert(box1.style.width);

        /*
         * 获取元素的当前显示的样式
         * 	语法：元素.currentStyle.样式名
         * 它可以用来读取当前元素正在显示的样式
         * 	如果当前元素没有设置该样式，则获取它的默认值
         *
         * currentStyle只有IE浏览器支持，其他的浏览器都不支持
         *
         * alert(box1.currentStyle.width); // 这个属性已经被删除了
         */

        /*
					 * 在其他浏览器中可以使用
					 * 		getComputedStyle()这个方法来获取元素当前的样式
					 * 		这个方法是window的方法，可以直接使用
					 * 需要两个参数
					 * 		第一个：要获取样式的元素
					 * 		第二个：可以传递一个伪元素，一般都传null
					 *
					 * 该方法会返回一个对象，对象中封装了当前元素对应的样式
					 * 	可以通过对象.样式名来读取样式
					 * 	如果获取的样式没有设置，则会获取到真实的值，而不是默认值
					 * 	比如：没有设置width，它不会获取到auto，而是一个长度
					 *
					 * 但是该方法不支持IE8及以下的浏览器
					 *
					 * 通过currentStyle和getComputedStyle()读取到的样式都是只读的，
					 * 	不能修改，如果要修改必须通过style属性
					 */
        var obj = getComputedStyle(box1, null);
        alert(obj.width);
        alert(getStyle(box1, "backgroundColor"));
      }

      /*
      *  定义一个函数，用来获取指定元素的当前的样式
      *      参数：
      *           obj  要获取样式的元素
      *           name  要获取样式的样式名
      * */
      function getStyle(obj, name) {
        // 正常浏览器，具有getComputedStyle方法
        if (window.getComputedStyle) {
          return getComputedStyle(obj, null)[name]; // 如果.name那获取的是对象中的name，而不是name变量
        } else {
          // IE8的方式
          return obj.currentStyle[name];
        }
      }
    }
  </script>
</head>
<body>
<button id="btn01">点我一下</button>
<br><br>
<div id="box1"></div>
</body>
</html>