Попытка использовать getBoundingClientRect () для добавленного элемента программно возвращает ширину и высоту 0 - PullRequest
Новая
       33

Попытка использовать getBoundingClientRect () для добавленного элемента программно возвращает ширину и высоту 0

0 голосов
/ 18 февраля 2019

Я пытаюсь получить getBoundingClientRect() элемента object, который я только что добавил в body, но он возвращает 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 к телу только для того, чтобы получить ширину и высоту,Как я могу это сделать?

1 Ответ

0 голосов
/ 18 февраля 2019

Мое обоснованное предположение состоит в том, что браузер еще не знает размер изображения, так как вы не ждете полной загрузки изображения.Я хотел бы сделать что-то вроде этого: 

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();

ОБНОВЛЕНИЕ Если ваш браузер не поддерживает обещания, и вы не можете / не хотите использовать транспортер (такой как 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());
  }
}
...