Получение ширины из скрытого изображения с помощью JavaScript - PullRequest
Новая
       0

Получение ширины из скрытого изображения с помощью JavaScript

1 голос
/ 27 мая 2020

В моем HTML есть изображение (id = «камень»), которое я прячу. Из этого изображения я позже сделал несколько копий (id = ”stone_xxx) в JS с помощью cloneNode, поместил их в DOM и удалил скрытый класс. Все работает нормально. Мне нужна ширина изначально при запуске программы (до того, как я сделаю первую копию), поэтому я беру ее из скрытого изображения (id = ”stone”). Но я всегда получаю naturalHeight (90 пикселей), а не фактическую высоту (45 пикселей).
Я даже попробовал это в консоли, чтобы исключить, что, возможно, CSS выполняется после JS, но это ничего не изменило, поэтому Мне пришлось использовать window.onload, как в Получить высоту ширины изображения javascript. 

let stone = document.getElementById( "stone" );
let newStone = stone.cloneNode( false );
newStone.classList.remove( 'hidden' );
let i = 1;
newStone.id = "stone_" + i;
let el = document.getElementById( 'position_' + i);
el.prepend(newStone);

console.log(stone.naturalWidth);  // => 272
console.log(stone.width);         // => 272 Should be : 45
.hidden { display: none;}
.stone { width: 45px;}
<img id="stone" class="stone hidden" src=https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png />
<div id="position_1"></div>

Ответы [ 2 ]

1 голос
/ 27 мая 2020

Я решил: Браузер не вычисляет новые размеры камня из-за отсутствия отображения, поэтому значение ширины не пересчитывается. Если я удалю скрытый класс, все в порядке. Итак, у меня есть 2 возможности:
• Начать без скрытого класса и установить его потом.
• Получить ширину одного из клонов Stone_xxx: 

let newStone = document.getElementById( "stone_xxx" );
let width = newStone.width;
console.log(width);   // => 45
0 голосов
/ 27 мая 2020

Попробуйте следующее: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <img id="image" src="http://www.fillmurray.com/200/200" alt="image" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
      const width = $('#image').width();

      console.log(width); // 200
    </script>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...