jQuery`css`函数不返回`border-color`属性

Question

I need to get border-color property and I try to do that with css() function

$('.panel-warning').css('border-color')

But its empty

Html

<div class="col-md-4 is-draggable ui-draggable ui-draggable-handle ui-draggable-dragging">
    <div class="panel panel-warning">
        <div class="panel-heading">Intermediate Outcome</div>
    </div>
</div>

CSS

.panel-warning {
    border-color: #faebcc;
}

fiddle

Answer 1

You have to go to the individual top, left, right, and bottom properties.

Firefox won't work unless you do that:

$('.panel-warning').css('border-left-color')

This is, of course, sort-of a pain and a burden, but those really are separately settable so I don't see that there's any way to avoid having your JavaScript know what to look for.

Chrome apparently does you a favor here, though it may get weird when the different sides really do have different colors. (Good bet that it's a core WebKit behavior, meaning that Safari and Opera probably do that too.)

Answer 2

Try this

$(document).ready(function(){
    alert($('.panel-warning').css('border-color'));
});

or put your javascript code at the end of the file, after the html and css code