Can you set a value in CSS from another value?-CodePudding

Let's say I want to get #origin's background color and set the value for #reciever. Is there any way to fetch a value from another element?

#origin {
  background-color:#58ae12;
}
#reciever {
  background-color: /* get value from #origin */
}

CodePudding user response：

CSS Variables were introduced in 2015 and gained much needed browser support in 2016. I would recommend MDN docs on this: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

:root {
  --main-bg-color: #58ae12;
}

Then in the #receiver, use that set variable:

#receiver {
  background-color: var(--main-bg-color);
}

Hope this helps @octa_yt00

CodePudding user response：

It really depends on the relationship between the 2 elements.

If the #receiver is a child element of #origin, you can just set background-color: inherit, and it should automatically be the color of the #receiver.

This is assuming that you don't want to/can't use JavaScript. If you use JavaScript, you can do something like this:

const origin = document.getElementById('origin')
const receiver = document.getElementById('receiver')
const originBgClr = getComputedStyle(origin).getPropertyValue('background-color')
receiver.style.backgroundColor = originBgClr

CodePudding user response：

Using the CSS custom properties you can achieve something similar to what you ask for.

:root {
  --main-color: blue;
}

.test {
  background-color: var(--main-color);
}

<div class="test">
<p>Test</p>
</div>

CodePudding user response：

You have 3 solutions

currentColor
root Color
transparent

currentColor

<div id="origin">
    <div id="reciever">
    </div>
</div>

#origin {
    background-color: #58ae12;
    color: #58ae12;
}
#reciever {
    background-color: currentColor;
}

:root color

:root {
    --origin-color: #58ae12;
}

#origin {
    background-color: var(--origin-color);
}
#reciever {
    background-color: var(--origin-color);
}

Transparent

<div id="origin">
    <div id="reciever">
    </div>
</div>

#origin {
    background-color: #58ae12;
}
#reciever {
    background-color: transparent;
    width: 100%;
    height: 100%;
}

CodePudding user response：

If you use Jquery you can change what you want.

You are looking for the original color

var old=$("#origin").css("background-color");

and you can change it

$("#reciever").css("background-color",old);

CodePudding user response：

I don't think there's any way to get the background color from another ID directly through CSS. However, you can use variables for this.

For Variables you have to make a root at the start:

:root {
    --bgcolor: #58ae12;
}

This way you will have a background color variable named bgcolor. You can simply use this in your background color then. However, for using it you have to use var(--bgcolor). E.g.

#origin {
  background-color:var(--bgcolor);
}
#reciever {
  background-color: var(--bgcolor);
}

CodePudding user response：

In Pure CSS it's not possible.

Here's 3 working solutions

// With Javacript
document.body.querySelector('#inherit-js').style.background = getComputedStyle(document.body.querySelector('#parent-js')).background

// With Javacript hack 
let color = '#123456'; //Set or Get color from anywhere you need
document.head.insertAdjacentHTML('beforeend', `<style>:root{--color-wanted-hack:${color};}</style>`); //Append style before DOM rendering then css var --color-wanted-hack is set

/* With CSS variables */

:root {
  --color-wanted: blue;
}

#parent-var {
  background: var(--color-wanted)
}

#inherit-var {
  color: white;
  background: var(--color-wanted)
}


/* With Javascript */

#parent-js {
  background: red;
}


/* With Javascript hack */

#parent-js-hack {
  background: var(--color-wanted-hack);
}

#inherit-js-hack {
  color: white;
  background: var(--color-wanted-hack)
}

<p id="parent-var">Hello world !</p>
<p id="inherit-var">Hello again !</p>

<p id="parent-js">Hello world !</p>
<p id="inherit-js">Hello again !</p>

<p id="parent-js-hack">Hello world !</p>
<p id="inherit-js-hack">Hello again !</p>