Блог

Я хотел бы получить стили inlines, установленные с помощью атрибута style в качестве объекта JS. Например, в следующем html я хотел бы получить #box значение атрибута div styles как {width: "300px" , color: "red" } (объект js)

HTML

 <div id="box" style="width: 300px; color: red">Box</div>

 

Если я напрямую обращаюсь к объекту style объекта dom, возвращаемым объектом является CSSStyleDeclaration, а это не то, что я хочу:

 var para = document.getElementById('box') 
console.dir(box.style)
 

Также использование window.getComputedStyle() не является вариантом, поскольку целевой объект является клоном элемента dom, который еще не был смонтирован.

Спасибо

Вы можете использовать getAttribute для получения атрибута string, а затем разделить на ; s, чтобы преобразовать его в нужный формат:

 const styleProps = Object.fromEntries(
  box.getAttribute('style')
    .split(/;  /)
    .map(str => str.split(/: */))
);
console.log(styleProps); 

 <div id="box" style="width: 300px; color: red">Box</div> 

Вот другой подход, который даст вам только допустимые значения, которые понимает браузер (вместо простого разбора строки).) Это решение выполняет итерацию по объекту style элемента для построения объекта:

 const para = document.getElementById('box')

const styleObj = Array.from(para.style).reduce((style, name) => {
  style[name] = para.style[name]
  return style
}, {})
 

Проблема с синтаксическим анализом строки и разделением заключается в том, что также будут использоваться любые недопустимые значения. Итак, приведенный ниже пример вернет вам { width: 'foobar' } то, что явно неверно.

 <div id="box" style="width: foobar">Box</div>