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>
  • 相关阅读:
    PS:图像的编辑(三)修复画笔工具
    如何知道自己电脑连接的无线网密码
    ps里“栅格化图层”有啥作用
    如何解决 ERROR Code 1101报错
    Oracle中SCOTT用户的 emp、dept、bonus、salgrade表的属性和结构
    PSCC2019以上版本如何取消等比裁剪
    distinct 多列详解
    银行取款、查询余额、交电话费功能
    银行卡系统,输入密码取钱功能
    根据周长计算不同形状图形的面积
  • 原文地址:https://www.cnblogs.com/MDZZZ/p/12497407.html
Copyright © 2011-2022 走看看