使用 jQuery addClass 或自定义 LoadCSS 函数将 css 应用于单个文本框答案

【问题标题】：apply css to a single textbox using jQuery addClass OR a custom LoadCSS function使用 jQuery addClass 或自定义 LoadCSS 函数将 css 应用于单个文本框
【发布时间】：2019-02-22 09:14:24
【问题描述】：

我正在使用 Django，我想将一些 CSS 应用到单个文本框。我使用网站 enjoycss.com 创建了一些 CSS。然后我将此 css 添加到 Django 的 base.css 的末尾：

.disabledInput {
  display: inline-block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  padding: 10px 20px;
  border: 6px solid #36c40f;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  font: normal normal bold 15px/normal Georgia, serif;
  color: rgba(0,142,198,1);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: rgba(252,252,252,1);
  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
}

我有一个我已经验证工作的javascript函数，使用类似这样的东西，与样式表无关：

$(this).css("background", green);

但如果我将其注释掉并尝试使用它，它就不起作用：

$(this).addClass("disabledInput");

为什么？

此外，我在自己的名为 disabled.css 的 css 文件中创建了相同的 .disabledInput。然后，我尝试将该 css 文件添加到文本框属性中，如下所示：

$(this).loadCSS('admin/css/disabled.css');

LoadCSS 函数如下所示：

$.fn.loadCSS = function(url) {
    if (!$('link[href="' + url + '"]').length)
        $(this).append('<link rel="stylesheet" type="text/css" href="' + url + '">');

}

为什么它不起作用？我忽略了什么？

【问题讨论】：

关于第一点，disabledInput 类可能被添加，但规则被另一个具有高优先级的 CSS 选择器覆盖。使用 DOM 检查器进行检查。
关于第二点，当您说“它不起作用”时，您的意思是 <link /> 元素没有插入到 DOM 中，或者没有应用样式？再次，您是否检查了 DOM 以确保已添加内容，并检查控制台是否有任何错误
在第一点，类显示如下：class="vDateField disabledInput"。因此，vDateField 必须优先于 disabledInput Rory McCrossan
在第二点上，我没有看到任何元素被插入。我正在寻找解决方案...
我添加了这个：$(this).removeClass("vDateField").addClass("disabledInput");。将 class="vDateField disabledInput" 更改为 class="disabledInput"，但仍然没有应用样式。

标签： jquery css django

【解决方案1】：

这是一个缓存文件问题。具体来说：

没用：

使用 Invalidate Cache and Restart 命令刷新 PyCharm 中的缓存。
使用 Apple Automator 脚本刷新 Safari 和 Chrome 的缓存

工作：

进入 Safari 手动清除历史记录。
为 Chrome 下载缓存杀手

【讨论】：