2

У меня есть скрипт выбора цвета, который задает цвет нужного элемента:

Пробовал таким образом, но что-то не пошло...

html

<div id="content">test</div>

css

#content:after {
  border-top-color: attr(data-after);
}

js

 if (ColorElement == '#bottom_color_form') {
    content.dataset.after = hex // пробовал так
 }

2 ответа 2

3

Возможно, вам подойдет вот такой подход.

Можно в качестве цвета бакграунда использовать переменную currentColor.

function changeColor(el) {
  document.querySelector('.content').style.color = el.value;
}
.content:after {
  content: '';
  display: block;
  height: 30px;
  width: 30px;
  background-color: currentColor;
}
<div class="content"></div>
<input placeholder="color" oninput="changeColor(this)">

5
  • окей, рабочий варинат .content:after, цвет меняется, а если у меня например есть еще и .content:before. Т.е. У меня before отвечает за фон стрелочки (должен быть в цвет выбратнного фона), а after отвечает за цвет бордера стрелочки. 29 мая 2018 в 10:18
  • @AlexanderSizintsev Может, тогда отдельным вопросом оформите, а этот ответ отметите как принятый? И приведёте достаточно кода для вопроизведения вашей проблемы. 29 мая 2018 в 10:21
  • @AlexanderSizintsev с :before все точно также можно сделать. Спокойно добавляйте :before и ставьте ему цвет через currentColor 29 мая 2018 в 10:35
  • @StepanKasyanenko тут проблема в том, что цвет у :after и :before может быть разный. как тогда быть? 29 мая 2018 в 10:49
  • @AlexanderSizintsev Надо с самого начала стараться давать полностью исчерпывающую информацию в вопросе. Если цвета разные, то в одном элементе сделать не получится. Можете попробовать использовать два разных элемента. 29 мая 2018 в 11:03
2

Строго говоря, для передачи в attr() цвета (и в целом значения, отличного от content) нужно явно указывать тип - см. MDN:

/* With type */
attr(src url);
attr(data-count number);
attr(data-width px);

В частности, там есть тип color.

Увы, возможность передавать в attr() что-то отличное от content до сих пор не поддерживается ни одним браузером - см. Can I Use.

гистограмма с can i use

Так что даже без JS такой вариант установки цвета работать не будет:

#content:after {
  content: '';
  display: block;
  height: 30px; 
  width: 30px;
  /* background-color: #FF0000; */
  background-color: attr(data-color color);
}
<div id="content" data-color="#FF0000"></div>

Напрямую манипулировать псевдоэлементами из JS невозможно, так, видимо, остаётся только вариант заранее объявить классы с необходимыми цветами (и переключать их через JS):

.content:after {
  content: '';
  display: block;
  height: 30px; 
  width: 30px;
  background-color: #000;
}

.content_red:after {
  background-color: #F00;
}

.content_blue:after {
  background-color: #00F;
}
<div class="content content_red"></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.