CODEWITHSUNDEEP
jquerycssborder
halocursed
halocursed

Reputation: 2485

Change border-bottom color using jQuery?

How to change the color of the bottom border using jQuery?

Upvotes: 41

Views: 154215

Answers (4)

nil
nil

Reputation: 3611

$("selector").css("border-bottom-color", "#fff");
  1. construct your jQuery object which provides callable methods first. In this case, say you got an #mydiv, then $("#mydiv")
  2. call the .css() method provided by jQuery to modify specified object's css property values.

Upvotes: 72

nil
nil

Reputation: 3611

to modify more css property values, you may use css object. such as:

hilight_css = {"border-bottom-color":"red", 
               "background-color":"#000"};
$(".msg").css(hilight_css);

but if the modification code is bloated. you should consider the approach March suggested. do it this way:

first, in your css file:

.hilight { border-bottom-color:red; background-color:#000; }
.msg { /* something to make it notifiable */ }

second, in your js code:

$(".msg").addClass("hilight");
// to bring message block to normal
$(".hilight").removeClass("hilight");

if ie 6 is not an issue, you can chain these classes to have more specific selectors.

Upvotes: 13

Mark Schultheiss
Mark Schultheiss

Reputation: 34168

If you have this in your CSS file:

.myApp
{
    border-bottom-color:#FF0000;
}

and a div for instance of:

<div id="myDiv">test text</div>

you can use:

$("#myDiv").addClass('myApp');// to add the style

$("#myDiv").removeClass('myApp');// to remove the style

or you can just use

$("#myDiv").css( 'border-bottom-color','#FF0000');

I prefer the first example, keeping all the CSS related items in the CSS files.

Upvotes: 5

John Boker
John Boker

Reputation: 83699

$('#elementid').css('border-bottom', 'solid 1px red');

Upvotes: 24

Related Questions