有時候單獨的使用CSS是不夠的。您可能需要使用JavaScript控制CSS值。但是你如何在JavaScript中獲得CSS值？

有兩種可能的方式，取決于您是嘗試獲取內聯樣式還是計算樣式。

獲取內聯樣式

內聯樣式是存在于 HTML style 屬性（attribute）中的樣式。

HTML 代碼：

<div class="element" style="font-size: 2em; color: red;">Red hot chili pepper!</div>

要獲取內聯樣式，可以使用 style 屬性（property）。

JavaScript 代碼：

const element = document.querySelector（'.element'）
const fontSize = element.style.fontSize
console.log（fontSize） // 2em
const color = element.style.color
console.log（color） // red

獲取計算樣式

如果您的樣式是在CSS文件中編寫的，則需要獲取計算出的樣式。為此，您可以使用 getComputedStyle 。

它有兩個值：

JavaScript 代碼：

const style = getComputedStyle（Element, ）；

這里的Element是指您使用 querySelector 選擇的元素。

這里的 pseudoElement 指的是你想要獲取的偽類元素的字符串（如果有的話）。如果您沒有選擇偽元素，則可以省略這個值。

讓我們通過一個例子來幫助理解。假設您有以下HTML和CSS：

HTML 代碼：

<div class="element"> This is my element </div>

CSS 代碼：

.element { background-color: red }

首先，您需要使用 querySelector 選擇元素。然后，使用 getComputedStyle 獲取元素的樣式。

JavaScript 代碼：

const element = document.querySelector（'.element'）
const style = getComputedStyle（element）

如果你用 console.log（style） 打印，您應該看到一個包含每個CSS屬性及其各自值的對象。

以上就是對如何在 JavaScript 中獲取 CSS 值?有什么方法的全部介紹，如果您想了解更多有關JavaScript教程，請關注PHP中文網。

以上就是如何在 JavaScript 中獲取 CSS 值?有什么方法的詳細內容，更多請關注php中文網其它相關文章！