Question

为什么以下输出为style.backgroundImage的空字符串？如何检索图像的高度和宽度，以便我可以适当地设置div的尺寸？

<!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);
}

Answer 1

elem.style指的是元素上设置的内联样式。

可以在此处找到获取背景图片的正确方法：Javascript: Get background-image URL of <div>

无论如何它都是（改进了url-getting ;-)）。

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

Answer 2

它返回空，因为背景图片样式应位于括号""或''

之间

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

为什么elem.style.backgroundImage返回空而不是CSS属性？

2 个答案: