jQuery を使用して DIV の背景画像のサイズを取得するにはどうすればよいですか?

jQuery を使用して DIV の背景画像の寸法を取得する

jQuery で DIV の背景画像の寸法を決定するには、特に組み込みメソッドでは不十分と思われる場合に、この問題が発生します。幸いなことに、Image オブジェクトの力を利用してこのハードルを克服するソリューションが存在します。

元々は、単純な行「jQuery('#myDiv').css('background-image')」が有効であると考えられていました。 。身長（）;"背景画像の高さを取得するには十分です。ただし、このアプローチでは、結果が関数ではないことを示すエラーが発生しました。

成功の鍵は、背景画像が実際の画像ではなく URL として保存されていることを認識することにあります。ディメンションにアクセスするには、まず URL を抽出する必要があります。これは、次のコードを使用して実行できます。

var image_url = jQuery('#myDiv').css('background-image').match(/^url\("?(.+?)"?\)$/);

URL を取得したら、Image オブジェクトを作成し、画像を読み込みます。ロードされると、オブジェクトは目的の寸法を公開します。

if (image_url[1]) {
  image_url = image_url[1];
  var image = new Image();

  $(image).load(function() {
    alert(image.width + 'x' + image.height);
  });

  image.src = image_url;
}

このメソッドにより、実際の画像がロードされ、寸法が正確に取得されることが保証されます。さらに、引用符や括弧を含むさまざまな形式の URL 指定をサポートしています。

以上がjQuery を使用して DIV の背景画像のサイズを取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。