首頁 > web前端 > css教學 > 主體

即使我有 CSS 規則,為什麼 `element.style.display` 仍為空?

Susan Sarandon
發布: 2024-11-07 01:20:02
原創
929 人瀏覽過

Why is `element.style.display` Empty Even When I Have CSS Rules?

為什麼CSS 樣式屬性在getElementById().style 時仍為空

當您使用getElementById() 擷取HTML 元素時,存​​取HTML 元素時,存​​取HTML 元素時,存​​取HTML 元素時,存​​取其儘管存在像#map {display: block} 這樣的CSS 樣式規則,但透過element.style.display 的style 屬性通常會傳回空值。

出現此行為是因為 element.style 僅明確反映內嵌樣式設定在 HTML 文件中的元素上。如果沒有定義內聯樣式,則 element.style 將為空。

要存取元素的實際計算樣式(其中包含內聯樣式和 CSS 規則),請使用 window.getCompulatedStyle() 方法。此方法提供了一個 Style 對象,表示應用於元素的完整樣式。

例如,呼叫 console.log(window.getCompulatedStyle(document.getElementById('test')).display) 將輸出「block, " 反映 #map {display: block} 規則。

雖然內聯樣式通常不鼓勵使用 CSS,但理解 element.style 和 window.getComputedStyle() 之間的區別對於準確存取元素樣式至關重要JavaScript。

以上是即使我有 CSS 規則,為什麼 `element.style.display` 仍為空?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板