我可以從 JavaScript 訪問無效/自定義 CSS 屬性的值嗎？

Question

假設我有以下 CSS：

div {
    -my-foo: 42;
}

我可以稍后在 JavaScript 中以某種方式知道給定div的-my-foo CSS 屬性的值嗎？

Answer 1

我認為您無法訪問無效的屬性名稱，至少它在 Chrome 或 Firefox 中對我不起作用。 CSSStyleDeclaration 只是跳過無效屬性。 對於給定的 CSS：

div {
    width: 100px;
    -my-foo: 25px;
}

style:CSSStyleDeclaration對象僅包含以下鍵：

0: width
cssText: "width: 100px"
length: 1

然而，有趣的是， DOM-Level-2 樣式規范是這樣說的：

雖然實現可能無法識別 CSS 聲明塊中的所有 CSS 屬性，但希望通過 CSSStyleDeclaration 接口提供對樣式表中所有指定屬性的訪問。

暗示 CSSStyleDeclaration 對象應該在上面的示例中列出-my-foo屬性。 也許有一些瀏覽器支持它。

我用於測試的代碼位於http://jsfiddle.net/q2nRJ/1/ 。

注意：您可以隨時通過解析原始文本來 DIY。 例如：

document.getElementsByTagName("style")[0].innerText

但這對我來說似乎有很多工作，而且不知道您這樣做的原因，我不能說是否存在更好的替代方法來解決您的問題。

Answer 2

CSS 自定義屬性

DOM Level 2 風格

正如 Anurag 指出的那樣，這是在 DOM Level 2 中提出的，后來被棄用了。 Internet Explorer 是唯一實現它的瀏覽器，他們在 Edge 中停止支持它。 IE 期望該屬性不以破折號開頭，因此my-foo: 42; 應該管用。

CSS 變量樣式

較新的瀏覽器支持 CSS 變量。 這些以雙破折號開頭：-- --my-foo: 42; （它們可以在其他地方重復使用，例如font-size: var(--my-foo); ）

例子

CSS

div {
  --my-foo: 42;
  my-foo: 42;
}

JS

// Chrome 49, Firefox 31, Safari 9.1 (future Edge):
const cssVariable = bodyStyles.getPropertyValue('--my-foo')
// IE:
const cssCustomProperty = bodyStyles['my-foo']

瀏覽器支持

目前 Microsoft Edge 是唯一不支持這兩種方法的瀏覽器，但在 Edge 中編寫 CSS 變量時“正在積極開發中” 。

Answer 3

在 Mac 10.12.6（或其他版本，也許）中，如果您想以如下樣式存儲某些屬性：

<span style="--my-foo: [{"a": "b"}]">text</span>

然后你使用 span.style.getPropertyValue('--my-foo') 來獲取，你會得到這樣的值：

[{'a': 'b'}]

這意味着，如果您想通過 JSON.stringify 以樣式存儲一些字符串/對象（出於某些特殊目的，例如 .dtd 限制等），並希望通過 JSON.parse 解析回來，您將被解析器錯誤卡住，錯誤消息說“單引號”不允許在 JSON 中使用。

在 Mac 10.12.6 Safari 中嘗試以下操作：

var span = document.createElement('span');
span.id = 'some_id';
var data =  JSON.stringify([{d: 'e'}]);
span.style = `--b-c: ${data}`;
document.body.appendChild(span);
var f = document.getElementById('some_id').style.getPropertyValue('--b-c');
console.log('f:', f);