在JavaScript中限制对'style'属性的访问

Question

我开始开发一个小的JavaScript库,我想只通过我的API来设置HTML元素的样式(因为出于某种原因,我需要完全控制样式).

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

如果我写这个(灵感来自这个主题):

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对象(本文似乎已过时),因此我可以"监听"修改.style.width属性的唯一方法是执行我自己的样式化API.
我想限制(或至少显示警告)直接style修改,因为它会破坏元素的行为.

Answer 1

从评论中您可以看出，限制对 style 属性的访问可能不是一个好的途径。但我从你的问题中了解到，你尝试走这条路线的原因是调整大小事件仅针对窗口对象触发。

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

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