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

Question

是否有通过JavaScript或JQuery同步两个属性的常用方法。

例如，我有一个“可编辑”的文本字段。双击，我隐藏它，然后显示一个输入框。如果文本字段更改大小，则输入也必须更改以便维护布局。在过去，在重新调整大小的事件中，我会确保我会改变两个对象的大小并且它工作正常。基本上，我手动确保每当标签改变大小时，我也改变了输入框的大小。

是否有比仅设置两种尺寸更好的设计模式？也许是CSS width发生变化时的监听器？

编辑＃1：示例

我想让div_one不断检查div_two的宽度。当div_two的宽度发生变化时，div_one的宽度将更改自己的宽度以匹配。对我来说，这听起来像是“cssWidthChangeListener”或其他什么。

编辑＃2：澄清

我认为我的帖子到目前为止还没有完全清楚，因为我对我的例子中发生的事情得到了很好的回应，但不完全是我所得到的。这是我想要的另一个重新陈述。

当css属性，类或属性在元素上发生更改时，如何创建事件/触发器？当div_one发生变化时，我想运行某个功能。

Answer 1

更改元素的属性。不要直接更改CSS属性。直接在JavaScript中操作CSS属性（偶尔display: none;除外）几乎总会导致令人头疼。

在您的示例中，您有两种状态：状态 A ，div_one的宽度为 N ₁ 和{{1} }具有宽度 M ₁ 。在状态 B 中，div_two的宽度为 N ₂ ，div_one的宽度为 M ₂ 的。知道这一点，你所要做的就是将每个状态的宽度定义为CSS文件中的一个类，然后操作元素＆＃39; （或者他们的祖先和兄弟姐妹的属性）（通常通过添加和删除CSS类）来告诉他们他们处于什么状态。

我发了两个你可以在这个JSFiddle中看到的快速示例：http://jsfiddle.net/jrunning/7Bf92/

如您所见，所有CSS属性都在CSS中设置，只更改了div_two属性。

在示例1中，两个class都有一个公共容器<input>，我们通过添加和删除<div>类来表示状态的更改.container-active。输入都不需要知道＆＃34;关于另一个人的宽度 - 他们只需要知道他们在每个州的宽度。

在示例2中，我们在第一个<div>上切换.active课程，并使用adjacent sibling selector（<input>）我们制作第二个+ <input> }自动改变它的外观。但是，同级选择器只能在一个方向上工作：纯CSS中没有办法根据之后的元素来改变元素的样式。

Answer 2

Angular JS提供了我能够通过数据绑定找到的功能。我现在正在阅读教程，但如果我找到更准确的信息，我会更新这个答案。