Как взять цвет из другого класса?

Question

К примеру у меня есть блок с классом test как написать что бы он брал цвет из body или другого класса.

Answer 1

Используя CSS пеерменные, не зря же говориться что CSS язык программирования (рофл ^_~)

* {
  box-sizing: border-box;
}

body {
  --color: red;
  background-color: var(--color);
}

.main {
  width: 100%;
  height: 200px;
  padding: 32px;
  background-color: black;
}

.test {
  width: 100%;
  height: 100%;
  background-color: var(--color);
}

<body>
  <div class="main">
    <div class="test"></div>
  </div>
</body>

Answer 2

Варианты с помощью CSS:

Объявление CSS переменной:

:root {
  --bg-color: red;
}

div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 1px solid black;
}

.one,
.two {
 background-color: var(--bg-color);
}

<div class="one">One</div>
<div class="two">Two</div>

Объявление отдельного класса для цвета:

div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 1px solid black;
}

.red {
  background-color: red;
}

<div class="one red">One</div>
<div class="two red">Two</div>

Назначить цвет как у родителя (да, знаю градиент - это не цвет, просто для наглядности использовал, с background-color будет ровно тоже самое):

div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 128px;
  height: 128px;
  margin: 8px;
  border: 1px solid black;
}

.one {
 background: linear-gradient(to right, red, blue);
}

.two {
  width: 50%;
  height:50%;
  background: inherit;
}

<div class="one">
  One
  
  <div class="two">Two</div>
</div>

Сделать прозрачный фон, чтобы цвет был такой же как и в блоке в котором он находится (да, знаю градиент - это не цвет, просто для наглядности использовал, с background-color будет ровно тоже самое):
```
div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 128px;
  height: 128px;
  margin: 8px;
  border: 1px solid black;
}

.one {
 background: linear-gradient(to right, red, blue);
}

.two {
  width: 50%;
  height:50%;
  background: transparent;
}
```
```
<div class="one">
  One
  
  <div class="two">Two</div>
</div>
```

Варианты с помощью JS:

Программно достать цвет элемнета и назначить другому:

const blockOne = document.querySelector('.one');
const blockTwo = document.querySelector('.two');

const blockOneBGColor = window.getComputedStyle(blockOne).backgroundColor;

blockTwo.style.backgroundColor = blockOneBGColor;

div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 1px solid black;
}

.one {
 background-color: red;
}

<div class="one">One</div>
<div class="two">Two</div>

Если это inline стиль тогда просто используя style

const blockOne = document.querySelector('.one');
const blockTwo = document.querySelector('.two');

const blockOneColor = blockOne.style.color

blockTwo.style.color = blockOneColor;

div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 1px solid black;
}

<div class="one" style="color: red;">One</div>
<div class="two">Two</div>

БЛОГ НА HUSL

Как взять цвет из другого класса?

Ответы (2 шт):

Варианты с помощью CSS:

Варианты с помощью JS: