JavaScript で CSS background-image から URL だけ取得する方法をご紹介します。
背景 background-image から URL だけ取得したい
background-image - CSS: カスケーディングスタイルシート | MDN
background-image: url("https://example.com/bg-image.png");
background-image から URL だけ取得する JavaScript サンプルコード
[基本編] background-image から URL 取得
var backgroundImage = 'url("https://example.com/bg-image.png")';
var backgroundImageUrl = backgroundImage.replace(/^url\\(["']?/, '').replace(/["']?\\)$/, '');
console.log(backgroundImageUrl); // "https://example.com/background-image.png"
[応用編] 特定 class 名の要素の background-image から URL 取得
const backgroundImageUrls = [];
const elements = document.getElementsByClassName('target-class-name');
for (let index = 0; index < elements.length; index++) {
const element = elements[index];
const backgroundImage = (element.style && element.style.backgroundImage) || '';
const url = backgroundImage.replace(/^url\\(["']?/, '').replace(/["']?\\)$/, '');
backgroundImageUrls.push(url);
}
以上、JavaScript で CSS background-image から URL だけ取得したい、現場からお送りしました。