JQuery 添加 Class 但视觉上没有变化

Question

我的 JQuery 代码将 class 添加到 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;">

Answer 1

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

Answer 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");
    }

JQuery 添加 Class 但视觉上没有变化

JQuery Adds Class but no visual change

javascript

css

jquery

webforms

devexpress