通过JavaScript事件同步两个CSS属性

Question

有没有通过JavaScript或JQuery同步两个属性的通用方法?

例如，我有一个"可编辑"的文本字段。在双击，我隐藏它，然后显示一个输入框。如果文本字段改变了大小，那么为了保持布局，输入也必须改变。在过去，对于一个重新调整大小的事件，我会确保我改变了两个对象的大小，并且它工作得很好。实际上，我手动确保每当标签改变大小时，我也会改变输入框的大小。

有没有更好的设计模式，而不是总是设置两个大小?也许是一个侦听器，当CSS width变化或什么?

编辑#1:示例

我想让div_one不断检查div_two的宽度。当div_two的宽度改变时，div_one的宽度也会随之改变。对我来说，这听起来像"csswidthchangellistener"之类的。

编辑2:澄清

我不认为我的帖子已经完全清楚，直到现在，我得到了很好的回应，在我的例子中发生的事情，但不完全是我得到的。这是我想要的另一种说法。

当元素上的css属性、类或属性发生变化时，如何创建事件/触发器?当div_one发生变化时，我想运行某个函数

Answer 1

更改元素的属性。不要直接改变CSS属性。在JavaScript中直接操作CSS属性(除了偶尔的display: none;)几乎总是会导致头痛。

在你的例子中，你有两个状态:在状态A中，div_one的宽度N₁， div_two的宽度M₁。在状态B中，div_one的宽度N₂， div_two的宽度M₂。知道了这一点，你所要做的就是将每个状态的宽度定义为CSS文件中的一个类，然后操作元素(或它们的祖先或兄弟)属性(通常通过添加和删除CSS类)来告诉它们处于什么状态。

我准备了两个快速示例，您可以在这个JSFiddle中看到:http://jsfiddle.net/jrunning/7Bf92/

正如你所看到的，所有的CSS属性都在CSS中设置，只有一个class属性被改变了。

在例1中，两个<input>都有一个共同的容器<div>，我们通过从<div>中添加和删除.container-active类来通知状态的变化。两个输入都不需要"知道"对方的宽度——它们只需要知道在每个状态下它们的宽度应该是多少。

在示例2中，我们在第一个<input> s上切换.active类，并且通过使用相邻的兄弟选择器(+)，我们使第二个<input>自动更改其外观。兄弟选择器只在一个方向上工作:在纯CSS中，没有办法根据之后的元素来改变元素的样式。

Angular JS提供了我所能找到的与数据绑定最接近的功能。我现在只是浏览教程，但如果我发现更准确的信息，我会更新这个答案。