How to change the css of div programmatically?

Question

I'm using div with some inline style and also i'm using a class to override the inline style. I need to change the border of the div while button click. I used the following code but it doesn't work?

HtML Code:

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

Class Style

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

Button Code

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

Demo : For demo please click HERE .

Please give some suggestions to change the css of the element.

Answer 1

In addition to Kartikeya's comment that you cannot use !important in the .css method in jQuery, because the method applies the styles inline, the style will not be overwritten because of your use of !important here:

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

I would suggest simply removing !important (excessive use of this is considered a bad practice). If you're not willing to do that, another possibility is to use the .toggleClass method to remove and add a method with your lack of border. But as I've stated, this is less preferable because !important should be avoided unless absolutely necessary.

---

Also, it's worth noting that because of the box model and the way that elements take up space, when you remove the border, the element will physically shrink. To stop this occuring, instead of setting the border to none , set it to transparent .

Answer 2

add another class for your style-change:

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

then use removeClass() and addClass() to swap the styles:

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

updated fiddle: http://jsfiddle.net/r28h4vws/6/

Answer 3

You can remove existing class test then add class test2 that specify only background-color

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

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

jsfiddle

Answer 4

Remove the !Important from the jquery and from the css for border:

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');
});

Here is a working update: 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>