Question 363826 in Html Question posted in
Some basic documentation can be found here.

Html – Changing the color of a parent div to the color of active child element on click

Pretty much what’s written above, I want to change the color of the container div so that it reflects the color of specific selected active elements.

So for example, the container’s background is a shade of grey – when I click on the element, the element contains a blue background. I want that blue background to then fill the grey element. And so on and so forth with different selected elements and colors. I only included one element, but at least 4 more elements will need this coding.

I imagine this needs to be done with Javascript? I have seen solutions for on hover and they required JS.

#tabTopBar {
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: #dddddd;
}

.tabTop {
    overflow: hidden;
    border: 1px solid black;
    background-color: gray;
}

.tabTop a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

#armory.active {
    background-color: #0e343d;
    color: white;
    pointer-events: none;
}

#armory:hover {
    background-color: #879a9e;
    color: black;
}

#peerless.active {
    background-color: #bab757;
    color: white;
    pointer-events: none;
}

#peerless:hover {
    background-color: #dcdbab;
    color: black;
}
   <div id="tabTopBar">
        <div class="tabTop">
            <a id="armory" href="#armory" class="active">Armory</a>
            <a id="peerless" href="#peerless">Peerless</a>
        </div>
    </div>
Tags:

2

Answers


  1. 0

    In Javascript, use getComputedStyle (see MDN) to get the background color of the element and then set the bar to that color. Example below.

    Note: I’ve had to remove the pointer-events:none from your CSS to allow the event to trigger.

    window.onload = () => {
  document.querySelector('#tabTopBar').addEventListener('click', (event) => {
    const elementBackgroundColor = getComputedStyle(event.target).backgroundColor;
    document.querySelector('.tabTop').style.backgroundColor = elementBackgroundColor;
  });
}
    #tabTopBar {
  margin: 0;
  padding: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #dddddd;
}

.tabTop {
  overflow: hidden;
  border: 1px solid black;
  background-color: gray;
}

.tabTop a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

#armory.active {
  background-color: #0e343d;
  color: white;
}

#armory:hover {
  background-color: #879a9e;
  color: black;
}

#peerless.active {
  background-color: #bab757;
  color: white;
}

#peerless:hover {
  background-color: #dcdbab;
  color: black;
}
    <div id="tabTopBar">
  <div class="tabTop">
    <a id="armory" href="#armory" class="active">Armory</a>
    <a id="peerless" href="#peerless">Peerless</a>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    You can also use css as mentioned in comments above. Using the powerfull :has() css selector you can select a child element with class or id and give it the style you want if the a tag is focused (you can use also visited..)

    #tabTopBar {
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: #dddddd;
}

.tabTop {
    overflow: hidden;
    border: 1px solid black;
    background-color: gray;
}

.tabTop a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

#armory.active {
    background-color: #0e343d;
    color: white;
    pointer-events: none;
}

#armory:hover {
    background-color: #879a9e;
    color: black;
}

#peerless.active {
    background-color: #bab757;
    color: white;
    pointer-events: none;
}

#peerless:hover {
    background-color: #dcdbab;
    color: black;
}

/* below are the lines added using the has() selector*/

#tabTopBar:has(a#armory:focus) .tabTop{  
    background-color: #879a9e;
}

#tabTopBar:has(a#peerless:focus) .tabTop{
    background-color: #bab757;
}
    <div id="tabTopBar">
    <div class="tabTop">
        <a id="armory" href="#" class="active" >Armory</a>
        <a id="peerless" href="#">Peerless</a>
    </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search