Как вытащить стили конкретного класса DOM?

Question

[Василий Васильев]

Есть элемент типа:

<div class="classA classB classC"></div>
<style>
.classA{
color: green;
border-radius: 27%;
border: 3px solid lightblue;
}
</style>

Задача:
Вытащить(в массив) все стили класса .classA. Т.е. на выходе должно быть:

{
"color": "green",
"border-radius": "27%",
"border": "3px solid lightblue"
}

Comments

[Иван]

никак

Answer 1

[0xD34F]

Можно попробовать обшарить document.styleSheets:

const getClassStyles = className =>
  [...document.styleSheets].reduce((styles, { cssRules }) => {
    return [...cssRules]
      .filter(n => n.selectorText === `.${className}`)
      .reduce((styles, { cssText }) => {
        return (cssText
          .match(/[\w\-]+: [^;]+/g) || [])
          .map(n => n.split(': '))
          .reduce((styles, [ k, v ]) => (styles[k] = v, styles), styles);
      }, styles);
  }, {});


const styles = getClassStyles('class-name');

Answer 2

[netrox]

Если указать свойства:
api.jquery.com/css

Comments

[Василий Васильев]

нужна pure js реализация. И в данной реализации тоже не выводится список всех свойств, только значение по имени свойства.