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

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

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

---

有人知道怎么做吗？

你可以得到

边框颜色

，就像你得到

背景颜色一样

$(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));
        });
    });
});

这应该可以正常工作：
您可以获得
边框颜色
，就像您获得
背景颜色一样

$(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));
        });
    });
});

这应该可以很好地工作：
因为你没有附加你的css，所以我自己制作了css，试试小提琴：

以下是jQuery的更改：

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

更新后可在Firefox中使用
在Firefox中工作的关键是你必须定义你想要的边框的哪一部分：上、下、左、右
既然你没有附加你的css，那就试试小提琴吧：

以下是jQuery的更改：

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

更新后可在Firefox中使用
在Firefox中工作的关键是你必须定义你想要的边框的哪一部分：上、下、左、右。单击时，它将父项的背景颜色设置为列表项的边框

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

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

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

运行这个

html
jquery
运行这个

html
jquery
我也试过类似的方法。即使这样，它也不会出现，因为“var bg”是
的一个属性数组。因此，它将为内容提供边框颜色。您不需要将
li
的所有属性设置为
父元素。您可以从
边框颜色
直接设置
背景颜色
。我添加了一个
JSFiddle
示例。我知道，我从另一篇文章中获得了该代码。我很高兴它成功了。很抱歉，您的JSFIDLE似乎不起作用。尝试使用
边框左侧颜色
而不是
边框颜色
。看起来，其他浏览器不接受对jQuery使用速记，
边框颜色
是一种速记。我也尝试过类似的方法。即使这样，它也不会出现，因为“var bg”是
的一个属性数组。因此，它将为内容提供边框颜色。您不需要将
li
的所有属性设置为
父元素。您可以从
边框颜色
直接设置
背景颜色
。我添加了一个
JSFiddle
示例。我知道，我从另一篇文章中获得了该代码。我很高兴它成功了。很抱歉，您的JSFIDLE似乎不起作用。请尝试使用
边框左侧颜色
而不是
边框颜色
。看起来，其他浏览器不接受对jQuery使用速记，
边框颜色
是一种速记。奇怪的是，它在Firefox上不起作用，但在Chrome上起作用。只是我吗？太奇怪了，它在Firefox上不起作用，但在Chrome上起作用。只是我吗？对不起，我的CSS很大，我找不到合适的元素。您的JSFIDLE似乎不起作用，当我试图将您的代码复制到我的网站时，它也不起作用。@VascovanderEng您在使用Firefox吗？@JosanIracheta是的。在你说我试着在谷歌chrome中使用它之后，它确实在那里工作！非常感谢。但是为什么它不能在firefox上运行？我该如何使它工作？@vascovandeng我不知道，但我在firefox上也遇到了同样的问题。你使用的是什么浏览器？浏览器中是否打开了javascript？我的小提琴和我下面那把你也说不行的小提琴绝对管用。只是想澄清一下，你希望他们点击li，背景颜色变为li的边框颜色吗？对不起，我的CSS很大，我找不到合适的元素。您的JSFIDLE似乎不起作用，当我试图将您的代码复制到我的网站时，它也不起作用。@VascovanderEng您在使用Firefox吗？@JosanIracheta是的。在你说我试着在谷歌chrome中使用它之后，它确实在那里工作！非常感谢。但是为什么它不能在firefox上运行？我该如何使它工作？@vascovandeng我不知道，但我在firefox上也遇到了同样的问题。你使用的是什么浏览器？浏览器中是否打开了javascript？我的小提琴和我下面那把你也说不行的小提琴绝对管用。只是为了澄清您是否希望他们单击li，并且背景颜色将更改为li的边框颜色？
$(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));
        });
    });
});