[JavaScript] CSS background-image から URL だけ取得する方法

JavaScript で CSS background-image から URL だけ取得する方法をご紹介します。

JavaScript

背景 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 だけ取得したい、現場からお送りしました。

参考情報

関連記事