一尘不染

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

css

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


阅读 262

收藏
2020-05-16

共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可能不会让您头痛不已。

2020-05-16