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.

Related: [How to apply !important using .css()?](http://stackoverflow.com/questions/2655925/how-to-apply-important-using-css) — Ram, Nov 14 '14 at 08:04

score 1 · Answer 1 · answered Nov 14 '14 at 08:02

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.

score 1 · Answer 2 · answered Nov 14 '14 at 08:03

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/

score 0 · Answer 3 · answered Nov 14 '14 at 08:01

0

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

answered Nov 14 '14 at 08:01

asdf_enel_hak

7,474
5
42
84

I would suggest that better practice is to simply remove the `!important` declaration in the stylesheet instead of worrying about changing classes. This only further muddies code. – marked-down Nov 14 '14 at 08:06

score 0 · Answer 4 · answered Nov 14 '14 at 08:04

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/

Dao Tam · Answer 5 · 2014-11-14T08:10:46.607

0

<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>

edited Nov 14 '14 at 08:10

answered Nov 14 '14 at 08:05

Dao Tam

503
1
3
13

1

There is no `str_replace` method in JavaScript. it should be `style.replace(...)`. – Ram Nov 14 '14 at 08:08

How to change the css of div programmatically?

5 Answers5