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을 얻은 후에는 이미지 개체를 생성하고 이미지를 로드합니다. 일단 로드되면 객체는 원하는 크기를 노출합니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!