Как правильно организовать перебор заголовков?

Question

[Andrej Sharapov]

Добрый день!
Подскажите, как лучше реализовать структуру скрипта?
На странице есть по несколько заголовков h1 - 6, каждый из них имеет атрибут data-size. Этот атрибут я вывожу через css в ::after, но утренний тупильник не дает мне сообразить, как загнать elems.style.fontSize в этот атрибут... Вопрос: как правильно составить массив, перебор всех заголовков и вывести значения в атрибуты?

Answer 1

[Klein Maximus]

https://codepen.io/kleinmaximus/pen/Yojbdj

Comments

[Andrej Sharapov]

не совсем то.

Я делал так

let headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
headings.forEach(e => {
  e.setAttribute('data-size', 'font-size' + e.style.fontSize);
});

&::after {
          position: absolute;
          content: attr(data-size);
}

но в афтер не выводит. Надо чтобы в нем было написано font-size: значение

Не пойму как вывести значения -__-

[Klein Maximus]

Обновил свой пример - https://codepen.io/kleinmaximus/pen/Yojbdj
Все выводится

[Andrej Sharapov]

Klein Maximus, да, выводит undefined

[Klein Maximus]

Andrej Sharapov, ну так вывести можно все, что угодно. Undefined выводится, потому что я так указал.

[Andrej Sharapov]

вроде вывел https://codepen.io/andrejsharapov/pen/vqaMyG
спасибо за помощь!

[Klein Maximus]

Andrej Sharapov, если помог - отметьте мой ответ решением ;)

[Andrej Sharapov]

Klein Maximus, без проблем)

Answer 2

[hzzzzl]

яваскриптом вроде нельзя добраться до before/after
может просто так?
https://codepen.io/anon/pen/PrBvLL

UPD:
однако можно ставить data-аттрибут через js, и он будет обновляться в псевдоэлементах, магия
jsfiddle.net/uq7ud

Comments

[Andrej Sharapov]

по логике, можно вывести значение стилей font-size для заголовков через e.style.fontSize, а css уже подхватит значение через content: attr(data-size);

[hzzzzl]

Andrej Sharapov, ааа так?
https://codepen.io/anon/pen/JQBQOa
две проблемы:
- в один before/after нельзя положить content: 'font-size: ' + attr(data-size), потому что цсс так не умеет
- e.style.fontSize не существует, если он вручную не прописан в цсс, надо заставлять браузер высчитывать через getComputedStyle

[hzzzzl]

но если задать типа h1 { font-size: 100px }, то всё, конечно же, перестанет работать ;D

[Andrej Sharapov]

hzzzzl, можно в одном content: 'font-size: ' attr(data-size);
Только почему-то выводит для rem выводит тоже в px))

[Andrej Sharapov]

hzzzzl, сделал так https://codepen.io/andrejsharapov/pen/vqaMyG работает, спасибо.

[hzzzzl]

Andrej Sharapov, а и правда, без + работает :)

[Andrej Sharapov]

hzzzzl, эти плюсы из-за js ) привычка))
Еще раз, спасибо за помощь.