将边框颜色转换为背景色。

Question

我有一个带背景色的家长。里面有一个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);
  });
});

在火狐中工作的关键是你必须定义你想要的边框的哪一部分:上、下、左、右。

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

试试我刚做的这把小提琴。它将父项的背景颜色设置为单击列表项的边框。

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