我在CSSStyleDeclaration原型中添加了一个变量，但无法对其进行修改

Question

I don't really understand prototypes, so it might be my fault, but theorically if I add a variable to a prototype, I will be able to change it in its instances, right? 我不太了解原型，所以这可能是我的错，但是从理论上讲，如果我向原型添加变量，则可以在其实例中进行更改，对吗？

Here the code: 这里的代码：

    <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>

The console returns "something", why? 控制台返回“某物”，为什么？

Answer 1

That's because foo is not a standard property, so 那是因为foo不是标准属性，所以

When you set cssText , the declaration is ignored 设置cssText ，声明将被忽略
Since it has been ignored, getPropertyValue would not have been able to retrieve the value. 由于已将其忽略，因此getPropertyValue将无法检索该值。
Instead, you attempt to get it via a camel-cased getter , but these getters only exist for supported CSS properties . 取而代之的是，您尝试通过驼峰式getter来获取它，但是这些getters仅适用于受支持的CSS属性。

However, on browsers that support CSS variables , you could use them: 但是，在支持CSS变量的浏览器上，可以使用它们：

 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>

我在CSSStyleDeclaration原型中添加了一个变量，但无法对其进行修改

问题描述

1 个解决方案

解决方案1
2 已采纳 2016-03-08 18:29:28

我在CSSStyleDeclaration原型中添加了一个变量，但无法对其进行修改

问题描述

1 个解决方案

解决方案1 2 已采纳 2016-03-08 18:29:28

解决方案1
2 已采纳 2016-03-08 18:29:28