javascript - 如何使用 jQuery 获取 css 属性的值

Question

我在这里面临一个非常愚蠢的担忧，但我无法解决它。

当鼠标悬停在面板上时，我想用与当前面板关联的颜色更改背景。

这是 HTML(使用 Bootstrap 3 ):

<div class="col-sm-3">
    <div class="panel panel-primary">
        <div class="panel-body">
            <h3 class="text-center">Text</h3>
        </div>
    </div>
</div>

还有 JS:

$('.panel').mouseenter(function() {
    $(this).css({
        'color' : '#fff',
        'background-color' : $('.panel-primary.border-color') // This makes no sense, but I don't see how to do it
    });
}).mouseleave(function(){
    $(this).css({
        'color' : '#000',
        'background-color' : '#fff'
    });
});

这种情况下的例子:

css 类 panel-primary 及其颜色为 #428bca(在文件 bootstrap.css 中定义)。因此，我想了解如何在 CSS 文件中获取这种颜色，并能够在上面的代码中直接使用 jQuery 应用它。

JSFIDDLE

这可能吗？如何实现？

Answer 1

jQuery 允许您使用 .css('property-name') 检索任何元素的 CSS 信息。

$(".panel-primary").css('border-color');

这应该没问题。