Как получить значение из класса

Question

function getCard(object) {
  const сardGet = document.getElementById('template-card');
  const сardPast = сardGet.content.cloneNode(true);
  сardPast.querySelector('.card__image').setAttribute('style', `background-image: url(${object.link})`);
  return сardPast;
};

Есть функция, которая копирует блок и в нем в диве=card__image устанавливает значение бэграунду. . А как можно получить это значение и передать его уже в html тегу img?

Answer 1

element.style.backgroundImage возвращает строку-фоновую картинку, но только если она добавлена непосредственно в HTML, в атрибут style (в том числе и через JS). Если картинку добавили через внешний CSS - вернет пустую строку. Поэтому для более надежного результата нужно добавить getComputedStyle(elem).backgroundImage

let moo = document.querySelector('.moo');
let boo = document.querySelector('.boo');

console.log( getBgImage(moo) );
console.log( getBgImage(boo) );
console.log( getBgImage( document.body ) );


function getBgImage(node) {
  let bg = node.style.backgroundImage || getComputedStyle(node).backgroundImage;
  
  return bg.replace(/url\(['"]?|['"]?\)/ig, "");
}

.moo {
  background-image: url('moo.png');
}

<div class="moo"></div>
<div class="boo" style="background-image: url('boo.png')"></div>

['"]? — Одиночная или двойная кавычка, ? означает "может быть, может не быть"

https://learn.javascript.ru/ >> "Регулярные выражениия" (часть 3, пункт 7)

setAttribute можете заменить на

сardPast.querySelector('.card__image').style.backgroundImage = `url(${object.link})`

P.s. Можно сделать более общую функцию:

let moo = document.querySelector('.moo');
let boo = document.querySelector('.boo');

console.log( getStyle(moo, 'backgroundImage') );
console.log( getStyle(moo, 'color') );
console.log( getStyle(boo, 'backgroundImage') );

function getStyle(node, prop) {
  return node.style[prop] || getComputedStyle(node)[prop];
}

.moo {
  background-image: url('moo.png');
  color: red;
}

<div class="moo"></div>
<div class="boo" style="background-image: url('boo.png')"></div>

Просят стили: Дает стили. Дальнейшее преобразование строки не её забота.

БЛОГ НА HUSL

Как получить значение из класса

Ответы (1 шт):