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?
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.
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.
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.
click(function() { var color = $( this ). css( "background-color" ); $( "p" ). html( "That div is " + color + "." ); });
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With