CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Vasco
Vasco

Reputation: 301

Turn the border color into the background color

I've got a parent div with a background color. And inside that I've got a ul with lots of li's, each with a different color and each with a brighter border color. Now I want to copy the border color of the li, and use that as background for the parent div.

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

I found this JQuery code, which copies the background color. It works, but I want the border color.

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

Does anybody know what to do?

Upvotes: 0

Views: 246

Answers (4)

Paige
Paige

Reputation: 124

Since you didn't attach your css I made up my own, try out the fiddle: http://jsfiddle.net/jg51h5c5/

Here's the jQuery changes:

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

updated to work in Firefox The key to working in Firefox is you must define which part of the border you want: top, bottom, left, right

Upvotes: 4

Bardh Lohaj
Bardh Lohaj

Reputation: 1410

You can get the border color just like you are getting the 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));
        });
    });
});

This should work fine: JSFiddle Demo.

Upvotes: 1

Jitesh Nair
Jitesh Nair

Reputation: 11

run this

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

Upvotes: 0

junkystu
junkystu

Reputation: 1487

Try this fiddle I just made. It sets the parent's backgound colour as the list item's border when clicked.

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

Upvotes: 1

Related Questions