javascript - toggleClass/addClass 不适用于输入

Question

我有一个输入元素：

<input id="box" type="text" />

以及以下 CSS 类：

.box-change
{
    border-color:#ffffff;
}

以及以下 jQuery 代码：

$('#box').toggleClass('box-change');

但是，它不会像我期望的那样改变边框颜色。有谁知道为什么？

编辑：

输入已经具有样式，因此是：

#box
{
border-color:#ff0000;
border-style:solid;
border-bottom-width:1px;
border-left-width:1px;
border-top-width:1px;
}

Answer 1

如果您最初删除了边框，那么您必须设置

border-width

和

border-style

所以简而言之，您的 CSS 应该如下所示：

.box-change
{
    border: 1px solid #fff;
}

但这一切都取决于您的初始样式是什么，输入的包含元素的背景颜色是什么……

在您提供更多详细信息后进行编辑

你的类没有被应用，因为通过 ID 设置样式的类在级联中比 CSS 类具有更高的优先级。这就是您没有看到它应用的主要原因。

如果你希望你的 CSS 类接管你有两个选择：

1. 将其设置为重要：

   .box-change
   {
       border: 1px solid #fff !important;
   }
   

2. 提供具有更高特异性并将接管的 CSS 规则

   #box.box-change
   {
       border: 1px solid #fff;
   }
   

第二种方式是首选方式，因为使用!important会使您的 CSS 更难维护，因为您的类不会按照 CSS 级联，而是按照您的重要性。你可以很容易地放松对它的控制。除非在极少数情况下，否则避免重要。

如何解决这个问题？

为了将来为您提供帮助，您应该在浏览器中使用开发人员工具（Chrome DevTools 或 Firebug for Firefox），这些工具会立即向您显示问题。当然，还要了解CSS 特殊性规则以及它们是如何级联的。

Answer 2

由于您的原始样式是用它定义的，#box因此它比 更具体.box-change，并且默认情况下会覆盖您的新添加。也可能.box-change是比级联更高#box。

您可以通过以下两种方式之一解决它：

#box.box-change{
  border-color: #fff;
}

或者

.box-change{
  border-color: #fff !important;
}