将边框颜色变为背景颜色

Question

我有一个背景颜色的父div。在里面，我有一个很多李的ul，每个都有不同的颜色，每个都有更明亮的边框颜色。现在我想复制li的边框颜色，并将其用作父div的背景。

<div class="content">
    <ul class="list">
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
    </ul>
</div>

我找到了这个JQuery代码，它复制了背景颜色。它有效，但我想要边框颜色。

$(document).ready(function(){
    $("li.item").click(function(){
        var bg = ['background-color',];
        var $this = $(this);
        $.each(bg , function(item, value) {
            $("div.macbook-content").css(value, $this.css(value));
        });
    });
});

有人知道该怎么办吗？

Answer 1

既然你没有附上你自己制作的CSS，请试试小提琴： http://jsfiddle.net/jg51h5c5/

这是jQuery的变化：

$(document).ready(function(){
  $("li.item").click(function(){
    var bg = $(this).css("border-top-color");
    $("div.content").css("background-color",bg);
  });
});

已更新，可在Firefox中使用 在Firefox中工作的关键是你必须定义你想要的边框部分：顶部，底部，左边，右边

Answer 2

您可以获得border color，就像获得background color。

一样

$(document).ready(function(){
    $("li.item").click(function(){
        var bg = ['border-left-color'];
        var currentItem = $(this);
        $.each(bg , function(item, value) {
            $("div.macbook-content").css('background-color', currentItem.css(value));
        });
    });
});

这应该可以正常工作：JSFiddle Demo.

Answer 3

尝试this fiddle我刚才做的。它将父级的背景颜色设置为单击时列表项的边框。

$(document).ready(function(){
   $("li.item").click(function(){
        var $this = $(this);
        $this.parents('div.content')
            .css('background', $this.css('border-color'));
   });
});

Answer 4

运行此

的HTML

<div class="content">
    <ul class="list">
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
    </ul>
</div>
<div class='chk'>5</div>

的CSS

.content {
    background:red;
}
li.item {
    border: 1px solid #666;
    background:green;
}
.chk{
    background:blue;
}

的jquery

$(document).ready(function () {
    $("li.item").click(function () {
        var bg = ['border-top-color', ];
        var $this = $(this);
        $.each(bg, function (item, value) {
            $("div.chk").css('background-color', $this.css(value));
        });
    });
});