限制对 JavaScript 中“样式”属性的访问

Question

我开始开发一个小型 JavaScript 库，我希望仅通过我的 API 来设置 HTML 元素的样式（因为出于某种原因，我需要完全控制样式）。

所以我想让 style 属性不可访问（我的 API 将通过我的 style 别名访问它 - 这不是一个理想的解决方案，但对于像 jQuery 这样的其他库，它可以做到这一点）。

如果我写这个（灵感来自this topic）：

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

它仅适用于box 元素。

是否可以对 Webkit、Firefox 和 IE9+ 中的所有（现有和未来）元素执行此操作？

我也试过这个：

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

但没有运气。

任何帮助将不胜感激！

编辑

正如@Teemu 建议的那样，我可以写HTMLElement.prototype 而不是HTMLElement，它在FF 和IE 中运行良好，但在Chrome 中不行。它看起来像Chrome bug。可惜……

Edit2 - 我为什么需要它

我想要开发的库的主要目标是允许以下写作风格：

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

在这种情况下，element 的宽度应该对 parent 的宽度的每次变化做出反应。
但由于onresize 事件仅适用于window 对象（this article 似乎已过时）， 我可以“聆听”修改 .style.width 属性的唯一方法是执行我自己的样式 API。
而且我想限制（或至少显示警告）直接style 修改，因为它会破坏元素的行为。

Answer 1

从 cmets 可以看出，限制对 style 属性的访问可能不是一个好方法。但我从您的问题中了解到，您尝试走这条路的原因是 resize 事件仅针对 window 对象触发。

如果您能够通过调整任何元素的大小事件来规避整个限制问题，那么我建议您查看 Ben Alman 的 jQuery resize event 插件。我不确定您是否想使用 jQuery 进行开发，但即使您不这样做，阅读该插件的代码也可能是值得的。基本上，它所做的是将侦听器的哈希表映射到他们正在侦听的元素，然后在轮询循环中（使用setTimeout 或setInterval）检查该映射中元素的大小。如果它在间隔期间（默认为 250 毫秒）发生了变化，它会触发侦听器本身。它工作得相当好。该特定插件挂钩到 jQuery 的事件系统，但您可以制作自己的 addResizeEvent 函数或类似的东西。

编辑：重新阅读您的问题后，我突然意识到您似乎正在尝试开发一些机制来处理 CSS 框模型的缺点，例如当你给一个元素 5px 的填充和 50% 的宽度时，它最终会比父容器的一半宽 10 个像素。如果是这种情况，请考虑box-sizing: border-box。