Как задать цвет :after у элемента?

177

16 июня 2018, 08:00

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

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

html

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

css

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

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

Answer 1

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

Можно в качестве цвета бакграунда использовать переменную 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)">

Answer 2

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

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

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

Увы, возможность передавать в attr() что-то отличное от content до сих пор не поддерживается ни одним браузером - см. 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; 
}