0

如果您使用 Javascript 设置 <input> 元素的样式，那么您以这种方式设置的任何属性似乎都会在 :focus 规则中被忽略。

我有一个例子说明了这一点：

  • 最初输入元素的背景和边框设置为与周围元素相同（div.header）
  • 单击 [open] 链接会打开 div.body 元素，该元素最初未显示。
  • 我想明确一下标题是一个文本字段，因此更改输入的背景和边框以匹配刚刚显示的文本区域。

我对 textarea 和 input 都有一个 :focus 规则，将背景着色为黄色，因此很明显文本字段具有焦点。

但这对输入元素不起作用，似乎是因为我已经以编程方式设置了这些属性。如果我不设置它们，那么 :focus 按预期工作。如果 :focus 规则设置了未在 中设置的属性.css()，那么它们将被尊重。

在 Safari、Firefox、Chrome 和 IE 上都是如此，所以显然是“预期的行为”，但我在网上找不到任何说（为什么）这是正确的。

显然我可以使用 blur 和 focus handlers来实现我想要的，但我试图理解为什么会这样。

4

2 回答 2

3

如果您直接设置元素的样式，则与使用 HTMLstyle 属性相同。它位于cascade 中的任何选择器之后。

通常，要使用 JavaScript 很好地处理 CSS 更改，您需要提前准备样式表（作为正确的样式表），然后更改元素以匹配新的选择器（通常通过修改其类列表）。

或者，您可以使用 JavaScript 修改样式表本身。

于 2013-06-20T21:26:16.717 回答
2

这与特异性有关，它由W3C记录，特别是

特异性有四个组成部分；我们称它们为 a、b、c 和 d。组件“a”最显着，“d”最不显着。

  • 组件“a”非常简单：样式属性中的声明为 1，否则为 0。

由于直接.css更新style属性，它比样式表中的任何内容都具有更高的特异性。您可以使用!importantgo 赋予更大的重要性（其优先级高于特异性），但更好的选择是使用 classes ( .addClass) 而不是直接更改 style 属性。

于 2013-06-20T21:31:00.883 回答