zoukankan      html  css  js  c++  java
  • JS基础(获取元素样式)

    获取元素的当前显示的样式
    语法:元素.currentStyle.样式名
    它可以用来读取当前元素正在显示的样式
    currentStyle只有IE浏览器支持,其他的浏览器都不支持

    在其他浏览器中可以使用
    getComputedStyle()这个方法来获取元素当前的样式
    这个方法是window的方法,可以直接使用

    需要两个参数

    getComputedStyle(要获取样式的元素,伪元素)

    第一个:要获取样式的元素

    第二个:可以传递一个伪元素,一般都传null

    该方法会返回一个对象,对象中封装了当前元素对应的样式

    可以通过对象.样式名来读取样式

    如果获取的样式没有设置,则会获取到真实的值,而不是默认值

    比如:没有设置width,它不会获取到auto,而是一个长

    通过currentstyle和getComputedStyle()读取到的样式都是只读的,

    不能修改,如果要修改必须通过style属性

    没有定义的同时没指定对象浏览器为把这个值当成变量,变量未定义会报错,

    而给了对象这个值就是属性,属性未定义就是undefined

    获取对应元素样式的兼容性代码:

            <style>
                #box1{
                     100px;
                    height: 100px;
                    background-color: red;
                }
            </style>
            <script>
                window.onload=function(){
                    var box1=document.getElementById('box1');
                    /*
                     *定义一个函数,用来获取指定元素的当前的样式
                     * 参数:obj
                     *        要获取样式的元素
                     *        name
                     *        要获取的样式名
                     */
                    function getStyle(obj,name){
                        // if(window.getComputedStyle)
                        // {
                        //     //正常浏览器的方式,具有getComputedStyle()方法
                        //     return getComputedStyle(obj,null)[name];
                        // }
                        // else
                        // {
                        //     //IE8的方式,没有getComputedStyle()方法
                        //     return obj.currentStyle[name];
                        // }
                        return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name];
                    }
                    alert(getStyle(box1,"width"));
                }
            </script>
        </head>
        <body>
            <div id="box1"></div>
        </body>
  • 相关阅读:
    A1044. Shopping in Mars (25)
    A1019. General Palindromic Number (20)
    A1018. Public Bike Management (30)
    26850: 收集数码晶体 有40%错误
    A1016. Phone Bills (25)
    A1014. Waiting in Line (30)
    A1011. World Cup Betting (20)
    A1010. Radix (25)
    A1009. Product of Polynomials (25)
    A1008. Elevator (20)
  • 原文地址:https://www.cnblogs.com/MDZZZ/p/12497407.html
Copyright © 2011-2022 走看看