P18 演示怎么获取非行间样式 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取非行间样式</title>
    <style>
        div {
            width: 400px;
        }

        #div1 {
            width: 200px;
            height: 200px;
            background: green;
        }
    </style>
    <!-- 
    本节课主要介绍的是怎么获取非行间的样式
    前面我们已经知道, 可以通过style来获取标签的行间样式.
    当我们要获取非行间的样式的时候要怎么做呢? 由于不同的浏览器获取非行间样式的方法是不同的
    1. IE浏览器使用的是currentStyle样式对象
    2. 在谷歌和火狐浏览器中使用的是一个方法getComputedStyle(obj, false)
    
 -->
    <script>
        /* 
        在获取非行间样式的时候, 为了保证兼容性, 我们通常会做如下处理
        为了方便使用, 可以将下面的函数给放到外面去, 这样封装的函数就可以被别处调用了.
        */
        function getStyle(obj, name) {
            if (obj.currentStyle) {
                alert(obj.currentStyle.width)
            } else {
                alert(getComputedStyle(obj, false)[name]);
            }
        }
        window.onload = function () {

            var oDiv = document.getElementById('div1');

            // function chormeAndFF() {
            //     /* 
            //     下面的这个函数就是在谷歌浏览器和火狐浏览器下用来获取非行间样式的函数
            //     1. 第一个参数是一个对象, 代表的是页面中的哪个标签
            //     2. 第二个参数其实没有很大的作用, 平常工作中可以随便填写任意类型的变量
            //         这个可以根据个人的习惯来随意填写, 个人的习惯是false, 意思就是第二个参数我不考虑.
            //     3. 需要关注的是, 在IE9以后的版本中, 也是支持下面的这种方法的.
            //      */
            //     alert(getComputedStyle(oDiv, false).width);
            // }
            // chormeAndFF();

            // function IE() {
            //     /* 下面的这种获取非行间样式的方法, 是IE浏览器中能够使用的方法 */
            //     alert(oDiv.currentStyle.width)
            // }

            getStyle(oDiv, 'width');// 直接调用获取行间样式的函数即可

            /* 
            复合样式: 样式中包含多个不同的组成部分(也就是属性), 比如border, background等等, 他们中有很多项样式组成的组合样式
            单一样式: 只有一项够成的样式, 比如width, height等等, 他就是最基础的样式
            需要注意的是:
            1. 对于复合样式的, 我们在获取的时候一定要选取最基础的某一属性来获取, 比如backgroundColor等等
            2. 对于单一的样式, 我们直接使用即可, 比较简单.
             */
        }
    </script>
</head>

<body>
    <div id="div1"></div>
</body>

</html>

 

posted @ 2020-07-12 01:22  Runmoxin  阅读(127)  评论(0)    收藏  举报