I've added a variable to CSSStyleDeclaration prototype, but can't modify it

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

When you set cssText , the declaration is ignored
Since it has been ignored, getPropertyValue would not have been able to retrieve the value.
Instead, you attempt to get it via a camel-cased getter , but these getters only exist for supported CSS properties .

However, on browsers that support CSS variables , you could use them:

 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>

I've added a variable to CSSStyleDeclaration prototype, but can't modify it

Question

1 answers

solution1
2 ACCPTED 2016-03-08 18:29:28

I've added a variable to CSSStyleDeclaration prototype, but can't modify it

Question

1 answers

solution1 2 ACCPTED 2016-03-08 18:29:28

solution1
2 ACCPTED 2016-03-08 18:29:28