How to change the color of the bottom border using jQuery?
Add a comment
|
4 Answers
$("selector").css("border-bottom-color", "#fff");
- construct your jQuery object which provides callable methods first. In this case, say you got an
#mydiv, then$("#mydiv") - call the
.css()method provided by jQuery to modify specified object's css property values.
3 Comments
nil
for the curious people who viewed the revision log about my tweaking of contents, I'm a little bit drunk.
halocursed
i want to change two or more properties..where must i put the second property
nil
because comment is not expressive enough, so i am gonna post another answer.
$('#elementid').css('border-bottom', 'solid 1px red');
Comments
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.
Comments
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.
