[damiano_polishiano]

#js #javascript #html #html5 #webdev
Mirki, pytanie laika: jak pobrać szerokość elementu?
robię mini lightboxa, ćwiczę dla siebie, mam kod HTML:

!<a href="//images/task19/popular-1.jpg" target="_blank">Small photo of city</a>

Oraz konstrukcję mini lightboxa w JS:

 var lightbox = document.createElement('div');
 document.body.appendChild(lightbox).classList.add('lightbox');
 lightbox.innerHTML = 
 '' +
 '' +
 '' +
 '' +
 '![#](' + imgHref +')' +
 '' +
 '' +
 '' + cityName.innerHTML + '

' +
 '' + cityText.innerHTML + '

' +
 '' +
 '' +
 '';

z kodu HTML chcę pobrać href z anchora i wkleić go do nowego img (robię to za pomocą imgHref)
potem chcę pobrać szerokość tego img. Próbowałem na 3 sposoby, ale albo pobiera mi niepoprawnie (obrazek ma 300px w rzeczywistości, 300px na ekranie, a mi pokazuje 217px) albo mam cholernie wielki obrazek a mi pokazuje 0. Dlaczego?

CSS dla tego nowego img:

.photo-wrapper {
 display: flex;
 align-items: center;
 justify-content: center;
 overflow: hidden;
 margin: 5px;
}
.photo-wrapper img {
 max-width: 100%;
}

[C.....n]

@damiano_polishiano: a wklej waść kod tutaj np: https://jsbin.com/

[damiano_polishiano]

@CaptainRumHandMorgan: https://jsbin.com/xidakoduvi/edit?js,output

[C.....n]

@damiano_polishiano: https://jsbin.com/menewijoku/1/edit?html,output wkleiłem adres do obrazka i nie ma z tym problemu, użyj naturalHeight i naturalWidth, element który badasz to obiekt HTMLImageElement ( console.log(lightbox.querySelector('.photo')) => [object HTMLImageElement] ), a tu jest opis https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement

[damiano_polishiano]

wkleiłem adres do obrazka i nie ma z tym problemu,

@CaptainRumHandMorgan: jest problem

[damiano_polishiano]

@CaptainRumHandMorgan: a nie, źle odświeżyłem, przepraszam...
ale nie chodziło o to - tutaj pobiera rzeczywistość wielkość obrazka, a chciałbym pobrać wielkość, która pojawiła się w tym "lightboxie"

[kmiasko]

@damiano_polishiano:

 var imgWidth = lightbox.querySelector('.photo-wrapper img').getBoundingClientRect();

console.log(imgWidth.width, imgWidth.height);
po kodzie, który ustawia wszystkie wielkości.

[damiano_polishiano]

@kmiasko: nope

[kmiasko]

@damiano_polishiano: Ale wielkość lightboxa a co za tym idzie wielkość obrazka ustawiasz w kolejnych wierszach, więc się zmienia. Pobierz ją pod blokiem kodu lightbox....

[damiano_polishiano]

@kmiasko: hmm, faktycznie, jak pobiorę w innym miejscu, to pokazuje poprawnie. Dziękuję, czyli prosty logiczny błąd ( ͡º ͜ʖ͡º). W takim razie inaczej muszę rozwiązać mój zamysł, ale przynajmniej wiem co się dzieje :)