首頁猿問為什么...

為什么 element.style.backgroundColor 屬性給出一個(gè)空字符串作為結(jié)果？

JavaScript

炎炎設(shè)計(jì) 2023-09-28 09:30:42

console.log(document.querySelector(".green").style.backgroundColor);// gives an empty string as a result in console.green { width: 200px; height: 200px; background-color: green;}<!DOCTYPE html><html><head> <title>test</title> <meta charset="UTF-8"> <link rel="stylesheet" href="src/styles.css"></head><body> <div class="green"></div> <script src="src/index.js"> </script></body></html>我知道我也可以使用window.getComputedStyle(document.querySelector(".green")).backgroundColor;這個(gè)答案中提到了但我想知道這背后的原因，即為什么它給出一個(gè)空字符串。

查看完整描述

3 回答

ITMISS

TA貢獻(xiàn)1871條經(jīng)驗(yàn) 獲得超8個(gè)贊

.style僅包含內(nèi)聯(lián)樣式（通過該屬性或具有相同名稱的 HTML 屬性設(shè)置）。它根本不受樣式表的影響。getComputedStyle為您提供該財(cái)產(chǎn)的當(dāng)前有效價(jià)值，無論它來自哪里。

反對回復(fù) 2023-09-28

紅糖糍粑

TA貢獻(xiàn)1815條經(jīng)驗(yàn) 獲得超6個(gè)贊

您想要計(jì)算的元素樣式：

 console.log(getComputedStyle(document.querySelector(".green"), null).getPropertyValue("background-color"));

反對回復(fù) 2023-09-28

浮云間

TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超4個(gè)贊

正如該屬性的 MDN 頁面element.style中所述：

該style屬性用于獲取和設(shè)置元素的內(nèi)聯(lián)樣式。

您的元素沒有style設(shè)置背景顏色的屬性 - 因此<yourelement>.style.backgroundColor返回空字符串。這就是getCompatedStyle存在的原因——允許您詢問元素上實(shí)際的最終/應(yīng)用的樣式，而不僅僅是那些可能作為屬性內(nèi)聯(lián)在元素上的樣式style。

反對回復(fù) 2023-09-28