Restrict access to 'style' property in JavaScript

Question

I'm starting to develop a small JavaScript library and I want to make styling of HTML elements possible only through my API (because for some reason I need to have full control over styling).

So I want to make style property inaccessible (my API will access it through my style alias - not an ideal solution, but for other libraries like jQuery it will do the trick).

If I write this (inspired by this topic):

var box = document.getElementById('someElementId');
Object.defineProperty(box, 'style', {
    get: function() {
        throw 'you cant access style property';
    }
});
box.style.color = 'red';

it works for box element only.

Is it possible to do this for all (existing and future) elements in Webkit, Firefox, and IE9+?

I've also tried this:

Object.defineProperty(HTMLElement, 'style', {...

but no luck.

Any help would be greatly appreciated!

Edit

As @Teemu suggested I can write HTMLElement.prototype instead of HTMLElement, and it works fine in FF and IE, but not in Chrome. And it looks like a Chrome bug. Sadly...

Edit2 - why do I need it

The main goal of a library I want to develop is to allow writing styles like:

element.setWidth('parent.width / 2 - 10');

In this case element's width should react on each changing of the parent's width.
But since onresize event is available only for window object (this article seems to be obsolete), the only way I can "listen" modifying .style.width property is to perform my own API for styling.
And I want to restrict (or at least show warning) direct style modifying because it will break the elements' behavior.

Answer 1

From the comments you can tell that restricting access to the style property is probably not such a good route. But I understand from your question that your reason from trying to go this route is that the resize event only fires for the window object.

If you would be able to circumvent the whole restricting issue with a resize event on just any element, than may I suggest you look into Ben Alman's jQuery resize event plugin. I'm not sure whether you want to develop with jQuery, but even if you don't it may be worth it to read that plugin's code. Basically, what it does is make a hashtable of listeners mapped to the element(s) they are listening on and then in a polling loop (with setTimeout or setInterval) check the size of the elements in that map. If it has changed during the interval (250ms by default) it triggers the listeners itself. It works reasonably well. That specific plugin hooks into jQuery's event system, but you could just make your own addResizeEvent function or something to that effect.

Edit: Upon re-reading your question it dawns on me that it looks like you are trying to develop some mechanism to deal with the downsides of the CSS box model, e.g. that when you give an element 5px padding and a width of 50% it will end up being 10 pixels wider than half the parent container. Consider box-sizing: border-box if that is the case.