CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Karthi Keyan
Karthi Keyan

Reputation: 4393

How to change the css of div programmatically?

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.

Upvotes: 0

Views: 135

Answers (5)

Dao Tam
Dao Tam

Reputation: 503

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

Upvotes: 0

Maffelu
Maffelu

Reputation: 2068

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/

Upvotes: 0

low_rents
low_rents

Reputation: 4481

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/

Upvotes: 1

marked-down
marked-down

Reputation: 10408

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.

Upvotes: 1

asdf_enel_hak
asdf_enel_hak

Reputation: 7640

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

Upvotes: 0

Related Questions