快捷導(dǎo)航

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

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

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

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

這個(gè)方法是window的方法，可以直接使用

需要兩個(gè)參數(shù)

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

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

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

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

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

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

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

下面舉個(gè)例子：

<!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)對(duì)象
            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屬性，我們?cè)O(shè)置的屬性是100px,

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

補(bǔ)充：getComputedStyle與style的區(qū)別

我們使用element.style也可以獲取元素的CSS樣式聲明對(duì)象，但是其與getComputedStyle方法還有有一些差異的（只讀與可寫）。

1、正如上面提到的getComputedStyle方法是只讀的，只能獲取樣式，不能設(shè)置；而element.style能讀能寫，能屈能伸。

2、獲取的對(duì)象范圍getComputedStyle方法獲取的是最終應(yīng)用在元素上的所有CSS屬性對(duì)象（即使沒有CSS代碼，也會(huì)把默認(rèn)的祖宗八代都顯示出來）；

而element.style只能獲取元素style屬性中的CSS樣式。因此對(duì)于一個(gè)光禿禿的元素<p>，getComputedStyle方法返回對(duì)象中l(wèi)ength屬性值

（如果有）就是190+，而element.style就是0。

總結(jié)

到此這篇關(guān)于js知識(shí)點(diǎn)總結(jié)之getComputedStyle用法的文章就介紹到這了,更多相關(guān)js getComputedStyle用法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: