• Javascript 笔记与总结(2-9)获取运行时的 style 对象


    获取内存中(正在渲染)的 style 的值(非内联 style,obj.style 只能获得内联 style 的值),可以用 obj.currentStyle(低版本 IE 和 Opera 支持)和 window.getComputedStyle(IE9 以及 标准浏览器支持)来获取。

    window.getComputedStyle 的格式是 window.getComputedStyle(obj,伪元素)

    第一个参数是要要获取计算后的样式的目标元素

    第二个参数是期望的伪元素,如"after","first-letter"等,一般为 null

    可以封装获取运行时的 style 对象的函数

    function getStyle(obj, attr){
        return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj, null)[attr];
    }

    注:这两个方法获取的对象是只读的,要改样式必须使用 obj.style。

    【例】

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            #div1{
                 300px;
                height: 300px;
                background: blue;
                border-bottom: 1px solid black;
            }
        </style>
    </head>
    
    <body>
        <div id="div1" onclick="t();"></div>
    </body>
    
    <script>
        function getStyle(obj, attr){
            return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj, null)[attr];
        }
    
        function t(){
            var div = document.getElementById("div1");
            div.style.width = parseInt(getStyle(div, "width")) + 5 + 'px';
            div.style.height = parseInt(getStyle(div, "height")) + 5 + 'px';
            div.style.borderBottomWidth = parseInt(getStyle(div, "borderBottomWidth")) + 1 + 'px';
        }
    </script>
    </html>      
  • 相关阅读:
    useState回调函数
    Ahook
    我的创业和职业观点
    一个超级工业软件的能力在哪
    【542】Mac上面修改jupyter notebook默认打开页面
    【541】shapely 相关功能
    【540】时间戳数字转换为格式化时间
    【539】地球两点距离以及面积计算
    【538】二维数据实现随机采样
    新春首发!Spring Boot 2 个新版本...
  • 原文地址:https://www.cnblogs.com/dee0912/p/4467647.html
Copyright © 2020-2023  润新知