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

【问题标题】：Why does elem.style.backgroundImage return empty rather than the CSS property?为什么 elem.style.backgroundImage 返回空而不是 CSS 属性？
【发布时间】：2014-02-09 04:40:48
【问题描述】：

为什么下面的 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);
}

【问题讨论】：

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

标签： javascript css

【解决方案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

【讨论】：

建议在评论中链接到答案而不是复制它。
可能重复..他的问题是'为什么 elem.style.backgroundImage 返回空'。
谢谢。为什么在元素上设置的内联样式中没有包含 CSS 属性？
也许我应该为这个问题提出一个新线程，但有没有办法以类似的方式获取 Image 对象。创建一个新的 Image 对象是不够的，因为 Chrome 需要先加载图像，然后才能从中提取尺寸。
哦，是的，抱歉，您应该通过将代码包装到 onload 函数中来获取图像加载后的尺寸

【解决方案2】：

它返回空，因为 background-image 样式应该在括号 "" 或 '' 之间

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

【讨论】：

添加引号并没有改变任何东西。您引用的链接网页也不起作用。问题是 style.backgroundImage 返回空而不是“url（box.jpg）”。他使用同样的方法。比利马修斯的回答有效
@xyzk，引号是可选的；）