Change the color of the border to match the background color

Question

Change the color of the border to match the background color

I have a parent container with a unique background color. Inside the parent container, there is an unordered list (ul) with multiple list items (li), each having a distinct color and a brighter border color. Now, I am looking to extract the border color of the li elements and apply it as the background color for the parent container.

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

Although I found jQuery code that successfully copies the background color, it does not work for the border color specifically.

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

If anyone has any insights on how to achieve this, please feel free to share your suggestions.

javascript jquery html css

Answer 1

Answer №1

Since the css attachment was not provided, a custom one was created for demonstration purposes. Feel free to check out the solution on this JSFiddle link.

Highlighted below are the jQuery modifications:

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

Optimized for Firefox compatibility To ensure functionality in Firefox, it is crucial to specify the border side (top, bottom, left, right) you wish to target.

Answer 2

Since the css attachment was not provided, a custom one was created for demonstration purposes. Feel free to check out the solution on this JSFiddle link.

Highlighted below are the jQuery modifications:

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

Optimized for Firefox compatibility To ensure functionality in Firefox, it is crucial to specify the border side (top, bottom, left, right) you wish to target.

Answer 3

Answer №2

Check out this new fiddle I created recently. It changes the background color of the parent element to match the border of the clicked list item.

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

Answer 4

Check out this new fiddle I created recently. It changes the background color of the parent element to match the border of the clicked list item.

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

Answer 5

Answer №3

To retrieve the border color, you can follow a similar method to how you would retrieve the background color.

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

This solution should work correctly: JSFiddle Demo.

Answer 6

To retrieve the border color, you can follow a similar method to how you would retrieve the background color.

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

This solution should work correctly: JSFiddle Demo.

Answer 7

Answer №4

execute this code

hypertext markup language

<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>

cascading style sheets

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

JavaScript library

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

Answer 8

execute this code

hypertext markup language

<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>

cascading style sheets

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

JavaScript library

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

Change the color of the border to match the background color

Answer №1

Answer №2

Answer №3

Answer №4

hypertext markup language

cascading style sheets

JavaScript library

Similar questions

Calculate the combined sum of values within dynamic inputs that share a common class, and automatically update the sum whenever input values are altered or new rows are added or removed dynamically

Updating previous values in reactjs to a new state

What could be causing the Php Media Gallery to malfunction?

Mocha maintains the integrity of files during testing

Tips for handling transparent areas during a hover event

Navigating through Switch cases and If Statements with multiple arguments can be complex for beginners in the world of JavaScript

What is the reason for innerHTML not functioning properly when trying to include HTML?

AngularJS SmartyUI position not dynamically updating on SmartyStreets plugin

Locating the nearest image within a specific div using jQuery's find method

Guide on creating a square within an element using JavaScript

Toggle the visibility of the navigation bar in Angular based on the user

Exploring the differences between JavaScript destructuring and assignment

What is causing an empty box to appear due to padding? Is there a way to conceal it

Updating the hyperlink of an html element using css

"Use jquerytools to create a dynamic play/pause button functionality for scrollable content

Informing a screen reader in Vue.js through the use of aria-live features

Can integer values be stored in localStorage similar to JavaScript objects and retrieved without requiring typecasting?

Various degree of stacking priority ordering

Is there a way to dispatch an event from one Angular ui-router view to another view?

Passing data as a parameter from the view to the controller using AngularJS