Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How might I get an element's border color value using jQuery?

Tags:

jquery

dom

css

Using $("#id").css("background-color") to retrieve an element's background color (or most other CSS attributes) works just fine, but $("#id").css("border-color") returns an empty string.

How can I get the border color value used on the element?

like image 575
JussiR Avatar asked Nov 26 '09 19:11

JussiR


People also ask

What is the syntax of border Colour?

The syntax for the CSS border-color property (with 3 values) is: border-color: top right_left bottom; When three values are provided, the first value will apply to the top of the box. The second value will apply to the right and left sides of the box.

What is the code for border-color in HTML?

One value, like: p {border-color: red} - all four borders will be red. Two values, like: p {border-color: red transparent} - top and bottom border will be red, left and right border will be transparent.

What is border and border Colour attribute?

Definition and Usage The border-color property sets the color of an element's four borders. This property can have from one to four values. If the border-color property has four values: border-color: red green blue pink; top border is red.

How can check background color in jQuery?

click(function() { var color = $( this ). css( "background-color" ); $( "p" ). html( "That div is " + color + "." ); });


2 Answers

CSS has "short-hand" properties that allows you to send multiple properties at once. Like font, border, background, etc. Well, the border-color CSS property actually sets the 4 properties border-top-color, border-right-color, border-bottom-color, and border-left-color.

If you want to get the border-color, you need to specify which side. For instance, to obtain the current value of border-left-color, you'd do:

$("#id").css("border-left-color")

This should work just fine since it seems as you're expecting that every side has the same color.

like image 145
William Avatar answered Sep 28 '22 15:09

William


William was close... The property you're looking for is border-left-color, so in full you need

$('#ID').css("border-left-color")

and to set it

$('#ID').css("border-left-color","blue");

for example.

Good luck, and hit me back in the comments.

like image 21
Gausie Avatar answered Sep 28 '22 15:09

Gausie