嘗試在以編程方式添加的元素上使用getBoundingClientRect（）返回寬度和高度0

Question

我正在嘗試獲取剛添加到body的object元素的getBoundingClientRect() ，但它返回的width和height為0。目前，我已修復了將SVG添加到包含相同圖片的html並將可見性設置為的問題。隱藏，然后從中獲取寬度和高度。 對象的大小是窗口大小的百分比，因此我無法提前知道。

let bulletSVG = document.createElement("object");
bulletSVG.setAttribute("class", "bullet"); 
bulletSVG.setAttribute("type", "image/svg+xml"); 
bulletSVG.setAttribute("data", "imgs/bullet.svg");

document.body.appendChild(bulletSVG);

console.log(bulletSVG.getBoundingClientRect());

我寧願不只是為了獲得寬度和高度而向身體添加SVG。 我能怎么做？

Answer 1

我的有根據的猜測是，瀏覽器尚不知道圖像的大小，因為您沒有等待圖像完全加載。 我會做這樣的事情：

const load = (obj) => 
  new Promise(resolve => obj.onload = resolve);

async function addSVG() {
  let bulletSVG = document.createElement("object");
  bulletSVG.setAttribute("class", "bullet"); 
  bulletSVG.setAttribute("type", "image/svg+xml"); 
  bulletSVG.setAttribute("data", "imgs/bullet.svg");

  document.body.appendChild(bulletSVG);

  await load(bulletSVG);

  console.log(bulletSVG.getBoundingClientRect());
}

addSVG();

更新如果您的瀏覽器不支持Promise，並且您不能/不希望使用轉譯器（例如Babel 7）； 您可以直接使用事件處理程序來使其工作，盡管它不會那么優雅：

function addSVG() {
  let bulletSVG = document.createElement("object");
  bulletSVG.setAttribute("class", "bullet"); 
  bulletSVG.setAttribute("type", "image/svg+xml"); 
  bulletSVG.setAttribute("data", "imgs/bullet.svg");

  document.body.appendChild(bulletSVG);

  bulletSVG.onload = function() {
    console.log(bulletSVG.getBoundingClientRect());
  }
}