javascript - 为什么我的 div 在 IE 中不改变颜色？

Question

以下场景在 IE 中无法实现。

样式:

.tabmenu {
    background-color: #990000;
    display: inline-block;
    width: 150px;
    position: relative;
    left: 59%;
    border-top-left-radius: 10em;
    margin-bottom: -8px;
    min-width: 75px;
    max-width: 150px;           
    font-size: 13px;
    font-weight: bold;
    font-style: normal;
    font-family: Arial;
    border: none;
    padding: 5px 5px;
    height: auto !important;
    cursor: pointer !important;
    color: #ffffff !important;
    text-align: center;
}

在 .cshtml 文件中

<div class="tabmenu" style="width:100px;" onclick="btnCommonOnClick()" id="btnCommon">Common</div>
<div class="tabmenu" style="background-color:#999999!important;"  onclick="EquipmentSpecificOnClick(1)" id="btnEquipment">Specific</div>   
<div class="tabmenu" style="background-color:#999999!important;width:100px;" onclick=" btnUnassignedonClick(this)" id="btnUnassigned">Unassigned</div>
<div class="tabmenu" style="background-color:#999999!important;width:100px;" onclick="OrphanOnClick()" id="btnOrphan">Orphan</div>

首先加载背景颜色看起来不错。当我点击任何其他 div 时，更改该 div 的背景颜色。为此，我给出了代码:

$("#btnCommon").css("background-color","#999999 !important");//grey
$("#btnEquipment").css("background-color","#999999 !important");//grey
$('#btnOrphan').css("backgroundColor","#999999!important");//grey
$('#btnUnassigned').css("backgroundColor","#990000!important");//red

以上代码在 IE 中不工作。 div 颜色未更改为红色。仍然是灰色。

有什么解决办法吗？

Answer 1

可以用 IE Edge 确认，使用内联 background-color:#999999!important CSS 不会被覆盖。

如果您删除 !important 声明，它将正常工作。

我添加到一个 html 页面:

<div class="tabmenu" style="background-color:#999999!important;width:100px;" onclick="OrphanOnClick()" id="btnOrphan">Orphan</div>

并在开发者控制台中运行:

$('#btnOrphan').css("backgroundColor","#990000!important");

但是背景颜色没有改变。

将 html 更改为:

<div class="tabmenu" style="background-color:#999999;width:100px;" onclick="OrphanOnClick()" id="btnOrphan">Orphan</div>

和运行:

$('#btnOrphan').css("backgroundColor","#990000");

背景颜色改变。

如果您需要保留 !important 声明，您可以尝试定义两个 css 类:

.bg-gray {background-color:#999999 !important;}
.bg-red{background-color:#990000 !important;}

并像这样标记您的 HTML:

<div class="tabmenu bg-gray" style="width:100px;" onclick="OrphanOnClick()" id="btnOrphan">

并更改点击处理程序中的颜色:

$('#btnOrphan').removeClass("bg-gray").addClass("bg-red");