JQuery 添加类但没有视觉变化答案

【问题标题】：JQuery Adds Class but no visual changeJQuery 添加类但没有视觉变化
【发布时间】：2016-03-14 16:29:27
【问题描述】：

我的 JQuery 代码将类添加到 html，但我没有看到任何视觉变化，有人知道为什么吗？我正在使用 DevExpress、Webforms。

.BoldRed {
    font-weight:bold;
    color:red;
}

function onTextBoxInit(s, e) {
    if (s.GetText().indexOf('1') > -1)
        $(s.GetInputElement()).addClass("BoldRed");
    else
        $(s.GetInputElement()).removeClass("BoldRed");
}

实际输出：

<input class="dxeEditArea_DevEx dxeEditAreaSys BoldRed" name="ctl00$ctl00$ASPxSplitter1$Content$ContentSplitter$MainContent$ASPxCallbackPanel1$ASPxFormLayout3$ASPxFormLayout3_E1" value="106971" id="ASPxFormLayout3_E1_I" onchange="aspxEValueChanged('ASPxFormLayout3_E1')" onblur="aspxELostFocus('ASPxFormLayout3_E1')" onfocus="aspxEGotFocus('ASPxFormLayout3_E1')" type="text" readonly="readonly" style="background-color: rgb(192, 224, 206);font-weight: bold;      color:red;">

【问题讨论】：

style 属性会覆盖 css 文件中的任何内容 - 该按钮已经指定了 font-weight 和 color，因此 CSS 将无法更改它，除非您走糟糕的路线（此处未注明，因为我很确定您的问题是所有按钮都在 style 中，而不仅仅是您要设置样式的类）

标签： javascript jquery css webforms devexpress

【解决方案1】：

内联样式的优先级高于外部 CSS。您的课程适用，但其规则被覆盖。现在您有两种可能：删除内联样式（首选），在您想要的具有更高优先级的规则末尾添加 !important。

【讨论】：

考虑到他的类应用了与内联相同的样式，这很可能是他的问题，!important 不会在这里保存他。虽然同意不使用它。我倾向于根据原则反对基于它的解决方案哈哈
现在是夏令时...我失去了一个小时的睡眠，我很抱歉。 !important 工作。喝了一大口咖啡。

【解决方案2】：

除非绝对必要，否则我不认为添加 !important 应该是首选解决方案，我会执行以下操作：

document.querySelector('.BoldRed').style = '';

以上内容从元素中移除了内联样式，您的addClass 样式不会被内联样式覆盖。

.BoldRed {
    font-weight: normal;
    color: white;
}

function onTextBoxInit(s, e) {
    if (s.GetText().indexOf('1') > -1)
        document.querySelector('.BoldRed').style = '';
        $(s.GetInputElement()).addClass("BoldRed");
    else
        $(s.GetInputElement()).removeClass("BoldRed");
}

注意：您的内联样式和您的 CSS 样式是相同的，我认为这是一个错误？

编辑 - 您可能需要将上面的查询选择器更改为：

document.querySelector('.dxeEditAreaSys').style = '';

例如：

function onTextBoxInit(s, e) {
        if (s.GetText().indexOf('1') > -1)
            document.querySelector('.dxeEditAreaSys').style = '';
            $(s.GetInputElement()).addClass("BoldRed");
        else
            $(s.GetInputElement()).removeClass("BoldRed");
    }

【讨论】：

这给了我Uncaught TypeError: Cannot set property 'style' of null 错误突出显示style = '';
这是一个使用这种技术的工作小提琴：https://jsfiddle.net/97eoknzh/。可能与它在 if 语句中的方式有关，但它肯定会起作用 - 如果没有看到你的完整代码，我看不到确切的原因。
@sojim2，见修订编辑
我试过了，但还是不行……这很可能是 devexpress 的怪癖。我将不得不就这个问题与他们取得联系。它没有给出任何错误，但没有视觉变化。但是添加!important 有效。