• Javascript学习笔记、获取元素CSS样式


    下面一段代码:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style type="text/css">
                #box{
                    height: 200px;
                     200px;
                }
            </style>
        </head>
        <body>
            <div id="box" style="background-color: red;">            
            </div>
        </body>
    </html>

    通过下面这种方式去获取元素id="box"的CSS样式

    var oBox = document.getElementById("box");
    console.log(oBox.style.backgroundColor);
    console.log(oBox.style.height);

    只能获取到行内样式"background-color: red;"的值,获取不到height: 200px;的值。

    需要获取计算后的样式可以采用下面这种方法

    var oBox = document.getElementById("box");
    console.log(getComputedStyle(oBox).height);

    getComputedStyle方法只有标准浏览器才支持,像IE8以下的低版本浏览器不支持,低版本浏览器只支持oBox.currentStyle.height

    封装一个函数,兼容不同版本浏览器:

    function getStyle(obj,attr){
        if(window.getComputedStyle){
         return window.getComputedStyle(obj)[attr];
        }
        else{
         return obj.currentStyle[attr];
        }
    }
  • 相关阅读:
    图像梯度计算
    图像轮廓检测
    元组()
    SwiftUI 概览
    TCL 语言概览
    列表 []
    Numpy 矩阵计算
    图像平滑(滤波)
    language="JavaScript"与type="text/javascript"
    调用接口, Test.java(不用任何包, MD5大写32位加密,HttpURLConnection)
  • 原文地址:https://www.cnblogs.com/eastonliu/p/14036485.html
Copyright © 2020-2023  润新知