ホームページ > ウェブフロントエンド > CSSチュートリアル > JavaScript を使用して Div 要素の背景画像 URL を取得する方法

JavaScript を使用して Div 要素の背景画像 URL を取得する方法

Barbara Streisand
リリース: 2024-12-09 17:23:11
オリジナル
837 人が閲覧しました

How to Get a Div Element's Background Image URL Using JavaScript?

JavaScript を使用して要素の背景画像 URL を取得する

質問: 背景の URL を取得するにはどうすればよいですか?特定の

<div> に割り当てられた画像JavaScriptを使用した要素?たとえば、次の HTML コードがあるとします:
<div>
ログイン後にコピー

背景画像の URL だけを抽出するにはどうすればよいですか?

答え: これを実現するには、次のようにします。手順:

  1. 要素の特定: 参照の取得<div> へdocument.getElementById('your_div_id').
  2. 計算されたスタイルを取得する: currentStyle または window.getComputedStyle() プロパティを使用して、識別された要素の計算されたスタイルを取得します。 element.
  3. 背景画像 URL を抽出:計算されたスタイルからbackgroundImageプロパティにアクセスします。通常、URL はかっこで囲まれるため、slice(4, -1) を使用して不要な文字を削除します。さらに、URL 内の二重引用符は replace(/"/g, "") を使用して置き換えられます。
  4. 次のコード スニペットは、このアプローチを示しています。

    var img = document.getElementById('your_div_id'),
        style = img.currentStyle || window.getComputedStyle(img, false),
        bi = style.backgroundImage.slice(4, -1).replace(/"/g, "");
    ログイン後にコピー

    このメソッドを使用すると、JavaScript で特定の要素の背景画像に関連付けられた URL を効率的に取得して利用できます。

以上がJavaScript を使用して Div 要素の背景画像 URL を取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

前の記事:JavaScript を使用してデバイスの DPI/PPI を正確に検出するにはどうすればよいですか? 次の記事:CSS は、別の要素の上にマウスを置いたときに、ある要素の不透明度に影響を与えることができますか?
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート