使用JavaScript获取CSS背景图像的大小？

Question

是否可以使用JavaScript获取CSS引用的背景图片的实际大小（以像素为单位的宽度和高度）？

Answer 1

是的，我会这样做…

  window.onload = function() {

    var imageSrc = document
                    .getElementById('hello')
                     .style
                      .backgroundImage
                       .replace(/url\((['"])?(.*?)\1\)/gi, '$2')
                        .split(',')[0];

    // I just broke it up on newlines for readability

    var image = new Image();
    image.src = imageSrc;

    var width = image.width,
        height = image.height;

    alert('width =' + width + ', height = ' + height)

}

一些注意事项…

• 我们需要删除url()JavaScript返回的部分以获取正确的图像源。,如果元素具有多个背景图像，我们需要分割。
• 我们创建一个新Image对象并将其设置src为新图像。
• 然后，我们可以读取宽度和高度。

jQuery可能不会让您头痛不已。