CODEWITHSUNDEEP
javascripthtmlcssprototype
fedetibaldo
fedetibaldo

Reputation: 182

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

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?

Upvotes: 0

Views: 351

Answers (1)

Oriol
Oriol

Reputation: 288480

That's because foo is not a standard property, so

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>

Upvotes: 2

Related Questions