JavaScript 可以存取無效 CSS 屬性的值嗎？

JavaScript 可以擷取無效的 CSS 屬性值嗎？

自訂 CSS 屬性，由帶有破折號前綴的名稱表示，提供了定義和定義無效 CSS 屬性的機制。存取應用程式中的獨特樣式。但是，如果這些自訂屬性的值無效或瀏覽器無法識別，JavaScript 是否可以存取它們？

說明

CSSStyleDeclaration 物件公開了JavaScript 中的一個元素。當遇到無效的屬性名稱（例如“-my-foo”）時，該物件通常會跳過該屬性並繼續處理其他有效的屬性。

DOM-Level-2 樣式規範建議在一個聲明區塊應該可以透過 CSSStyleDeclaration 介面訪問，包括無效的聲明區塊。然而，實際上，像 Chrome 和 Firefox 這樣的瀏覽器並不支援這種行為。

儘管 JavaScript 無法直接存取無效 CSS 屬性的值，但另一種方法是解析原始 CSS 文字。透過從對應的樣式元素中提取樣式屬性，您可以手動識別並檢索自訂屬性的值，即使該值無效。

程式碼範例

The以下程式碼示範如何解析原始CSS 文字並擷取「-my-foo」屬性的值：

const styleText = document.getElementsByTagName("style")[0].innerText;
const propertyName = "-my-foo";

const value = styleText.match(new RegExp(`\b${propertyName}:\s*(.+?)\b`, "i"))[1];

注意： 此方法需要一個正規表示式來匹配自訂屬性名稱並提取其值。它被認為是低階解決方案，可能不是適合所有場景的最有效或最合適的方法。

以上是JavaScript 可以存取無效 CSS 屬性的值嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！