快捷導(dǎo)航

js知識點(diǎn)總結(jié)之getComputedStyle的用法

更新時間：2022年10月18日 09:53:22 作者：時雨.`

getComputedStyle是一個可以獲取當(dāng)前元素所有最終使用的CSS屬性值,下面這篇文章主要給大家介紹了關(guān)于js知識點(diǎn)總結(jié)之getComputedStyle用法的相關(guān)資料,需要的朋友可以參考下

getComputedStyle()這個方法來獲取元素當(dāng)前的樣式

這個方法是window的方法，可以直接使用

需要兩個參數(shù)

第一個：要獲取樣式的元素
第二個：可以傳遞一個偽元素，一般都傳null

該方法會返回一個對象，對象中封裝了當(dāng)前元素對應(yīng)的樣式

1.可以通過 getComputedStyle(對象，null).樣式名 的形式來讀取樣式

如果獲取的樣式?jīng)]有設(shè)置，則會獲取到真實(shí)的值，而不是默認(rèn)值

比如：沒有設(shè)置width，它不會獲取到auto，而是一個長度

2.為了更方便的使用可以加入正則表達(dá)式獲取樣式名

利用 getComputedStyle(樣式元素，null)[樣式名] 的形式來獲取樣式

下面舉個例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box1{
            width: 100px;
            height: 100px;
            background-color: red;
            left: 100px;
            position: absolute;
        }
    </style>
    <script>
        window.onload=function(){
            //獲取box1元素節(jié)點(diǎn)對象
            var box1=document.getElementById("box1");
            //這里調(diào)用getComputedStyle來獲取left的值
            var left=getComputedStyle(box1,null)["left"]; 
            alert("left的值是"+left);         
            }
        }
    </script>
</head>
<body>
    <div id="box1"></div>
</body>
</html>

可以看到這里是獲取box1元素的left屬性，我們設(shè)置的屬性是100px,

運(yùn)行結(jié)果如下：