elem.style.backgroundImage가 CSS 속성이 아닌 빈 값을 반환하는 이유는 무엇입니까?

왜 다음과 같은 출력이 style.backgroundImage에 대한 빈 문자열입니까? div의 크기를 적절하게 설정할 수 있도록 이미지의 높이와 너비를 검색하려면 어떻게해야합니까?elem.style.backgroundImage가 CSS 속성이 아닌 빈 값을 반환하는 이유는 무엇입니까?

<!DOCTYPE html> 
<html> 
<head> 
    <link href="test.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
    <div class="myDiv" onclick="outputBGImageUrl(this)"> 
     Click To Get BG Image Property 
    </div> 
    <script type="text/javascript"> 
     function outputBGImageUrl(elem){ 
      var bgImage = elem.style.backgroundImage; 
      console.log(bgImage); 
     } 
    </script> 
</body> 
</html>

CSS :

.myDiv{ 
    background-image:url(box.jpg); 
}

출처

2014-02-09 theGuardian

'elem.style'이 요소에 설정된 인라인 스타일을 말한다. – Bill

elem.style 요소에 설정된 인라인 스타일을 의미 사이 여야합니다 때문에 비어 반환합니다.

배경 이미지를 얻을 수있는 올바른 방법

은 여기에서 찾을 수 있습니다 : Javascript: Get background-image URL of <div>

을 여기 어쨌든입니다 (와 개선 ;-) URL-지고). 여기

var img = document.getElementById('your_div_id'), 
style = img.currentStyle || window.getComputedStyle(img, false), 
bg_image_url = style.backgroundImage.replace(/url\((['"])?(.*?)\1\)/gi, '$2').split(',')[0];

그리고 당신이 크기를 얻을 것입니다 방법입니다

var image = new Image(); 

image.onload = function(){ 
    var width = image.width, 
    height = image.height; 
} 

image.src = bg_image_url; //set the src after you have defined the onload callback

출처

2014-02-09 04:48:10 Bill

대답을 복사하는 대신 주석에 연결하는 것이 좋습니다. – sachinjain024

* 가능 * 중복 .. 그의 질문은 'elem.style.backgroundImage가 비어있는 이유는 무엇입니까'입니다. 덕분에 – Bill

. 요소에 설정된 인라인 스타일에 포함 된 CSS 속성이 아닌 이유는 무엇입니까? – theGuardian

배경 이미지 스타일 괄호 "" 또는 ''

.myDiv{ 
background-image:url("box.jpg"); 
}

출처

2014-02-09 04:47:00 Xyzk

따옴표를 추가해도 아무 것도 바뀌지 않았습니다. 참조하는 연결된 웹 페이지가 작동하지 않습니다. 문제는 style.backgroundImage가 "url (box.jpg)"이 아닌 empty를 반환한다는 것입니다. 그는 같은 방법을 사용합니다. Billy Matthews 대답은 – theGuardian

@xyzk, 따옴표는 선택 사항입니다.) – Bill

elem.style.backgroundImage가 CSS 속성이 아닌 빈 값을 반환하는 이유는 무엇입니까?

답변

관련 문제