Question

我使用带有内联样式的div，并且我还使用类来覆盖内联样式。我需要在按钮单击时更改div的边框。我使用了以下代码，但它没有用？

HtML代码：

<div id="test2" class="test" style="height:30px; width:150px; background-color:red; border:1px solid green;"></div>
<button id="test1">Test</button>

班级风格

div.test{
    border:2px solid black !important;
    background-color:blue !important;
}

按钮代码

$('#test1').click(function(){
    $('#test2').css('border','none !important');
});

演示：有关演示，请点击HERE。

请提供一些改变元素css的建议。

Answer 1

除了Kartikeya的评论，你不能在jQuery的!important方法中使用.css，因为该方法将内联样式应用，样式将不由于您在此处使用!important而被覆盖：

div.text {
    border:2px solid black !important;
}

我建议简单地删除!important（过度使用这被认为是一种不好的做法）。如果您不愿意这样做，另一种可能性是使用.toggleClass方法删除并添加缺少边框的方法。但正如我所说，这是不太可取的，因为除非绝对必要，否则应避免使用!important。

另外，值得注意的是，由于盒子模型和元素占用空间的方式，当你移除边框时，元素会物理缩小。要停止此操作，请将其设置为none，而不是将边框设置为transparent。

Answer 2

为您的样式更改添加另一个类：

div.test_borderless{
    border:none !important;
    background-color:blue !important;
}

然后使用removeClass()和addClass()来交换样式：

$('#test1').click(function(){
    $('#test2').removeClass("test").addClass("test_borderless");
});

更新小提琴： http://jsfiddle.net/r28h4vws/6/

Answer 3

您可以删除现有的课程test，然后添加仅指定test2的课程background-color

div.test2{
    background-color:blue !important;
}

$('#test1').click(function(){
    $("#test2").removeClass("test").addClass("test2") 
});

jsfiddle

Answer 4

从jquery和边框的css中删除！Important：

<强> HTML

<div id="test2" class="test" style="height:30px; width:150px; background-color:red; border:1px solid green;"></div>
<button id="test1">Test</button>

<强> CSS

div.test{
border:2px solid black;
background-color:blue !important;

}

<强>的Javascript

$('#test1').click(function(){
    $('#test2').css('border','none');
});

以下是工作更新：http://jsfiddle.net/r28h4vws/7/

Answer 5

<script>
    var style = $("#test2").attr("style");
    //Write code to remove css of border here like following.
    style = style.replace("border:1px solid green;","");
    $("#test2").attr("style", style+"border:none !important;");
</script>

如何以编程方式更改div的css？

5 个答案: