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

从评论中可以看出，限制对style属性的访问可能不是一个好方法。但是我从你的问题中了解到，你试图走这条路的原因是resize事件只会触发窗口对象。

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

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

限制访问＆＃39; style＆＃39; JavaScript中的属性

1 个答案: