toggleClass/addClass不'不要输入

toggleClass/addClass doesn't work with input

本文关键字：输入 addClass toggleClass      更新时间：2023-09-26

我有一个输入元素：

<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;
}

如果最初删除了边框，则必须设置

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的特殊性规则以及它们是如何级联的。

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

你可以用两种方法解决它：

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

或

.box-change{
  border-color: #fff !important;
}
相关文章：