Change border-bottom color using jquery?

Question

I want to change the color of the bottom border using jquery..Thanks

Answer 1

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

Answer 2

$("selector").css("border-bottom-color", "#fff");

1. construct your jQuery object which provides callable methods first. is this case, say you got an div#mydiv, then $("div#mydiv")
2. call the .css() method which is provided by jQuery to modify specified object's css property values.

Answer 3

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.

Answer 4

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.