我已經添加了一個變量到CSSStyleDeclaration原型，但不能修改它

我不太瞭解原型，所以它可能是我的錯，但理論上如果我添加一個變量到原型，我將能夠改變它的實例，對吧？

下面的代碼：我已經添加了一個變量到CSSStyleDeclaration原型，但不能修改它

<head> 
     <script> 
      CSSStyleDeclaration.prototype["foo"] = "something"; 
     </script> 
    </head> 
    <body> 
     <div style="foo:'maybe'" id ="myId"></div> 
     <script> 
      var el = document.getElementById("myId"); 
      console.log(el.style.foo); 
     </script> 
    </body>

控制檯將返回「東西」，爲什麼呢？

來源

2016-03-08 fedeTibaldo

如果返回'「東西」'，這意味着它已被修改「導致它的原始值是「也許」......對吧？我看不到它沒有修改。 –

這是因爲foo是不是一個標準的屬性，所以

當您設置cssText，該聲明被忽略
既然已被忽略，getPropertyValue不會已經能夠檢索值。
取而代之，您嘗試通過camel-cased getter獲取它，但這些獲得者僅存在於supported CSS properties。

然而，在支持CSS variables瀏覽器，你可以使用它們：

function getFoo(el) { 
 
    return getComputedStyle(el).getPropertyValue('--foo'); 
 
} 
 
snippet.log("body: " + getFoo(document.body)); 
 
snippet.log("#myId: " + getFoo(document.getElementById('myId')));

* { 
 
    --foo: 'something'; 
 
}

<div style="--foo: 'maybe'" id="myId"></div> 
 
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --><script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

來源

2016-03-08 18:29:28 Oriol

非常感謝。我一直在嘗試用自定義CSS前綴和駱駝套裝屬性：D現在我明白了 – fedeTibaldo

我已經添加了一個變量到CSSStyleDeclaration原型，但不能修改它

回答

相關問題