javascript - 通过 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₁ 和 div_two宽度 M₁。在状态 B，div_one宽度为 N₂ 和 div_two宽度 M₂。知道了这一点，您所要做的就是将每个状态的宽度定义为 CSS 文件中的一个类，然后操作元素(或其祖先或 sibling )的属性(通常通过添加和删除 CSS 类)来告诉他们处于什么状态。

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

如您所见，所有 CSS 属性都在 CSS 中设置，只有一个 class。属性已更改。

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

在示例 2 中，我们切换 .active第一节课<input> s，并使用 adjacent sibling selector ( + ) 我们制作第二个 <input>自动改变它的外观。不过，同级选择器只能在一个方向上工作:在纯 CSS 中，无法根据元素之后的元素更改元素的样式。