Question

我真的不了解原型，所以它可能是我的错，但理论上如果我将一个变量添加到原型中，我将能够在其实例中更改它，对吧？

代码如下：

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

控制台返回“东西”，为什么？

Answer 1

那是因为foo不是标准属性，所以

设置cssText时，将忽略声明
由于它已被忽略，getPropertyValue无法检索该值。
相反，您尝试通过camel-cased getter获取，但这些getter仅适用于supported CSS properties。

但是，在支持CSS variables的浏览器上，您可以使用它们：

＆＃13;

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

＆＃13;

* {
  --foo: 'something';
}

＆＃13;

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

＆＃13;

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

1 个答案: