img.naturalWidth
bearbeitet von
@@Matthias Scharwies
> Im SELF-Wiki gibt es ein Beispiel zu [images.naturalWidth](https://wiki.selfhtml.org/wiki/JavaScript/DOM/Document/images/naturalWidth)
>
> ~~~ JavaScript,bad
> 'use strict';
> document.addEventListener('DOMContentLoaded', function () {
> document.querySelector('#auslesen')
> .addEventListener('click', analyseImage);
>
> function analyseImage() {
> let image = document.querySelector('img');
> document.querySelector('output')
> .textContent = ' Höhe: ' + image.height + 'px \n' + ' Breite: ' + image.width +
> 'px \n' + ' orig. Höhe: ' + image.naturalHeight + 'px \n' +
> ' orig. Breite: ' + image.naturalWidth + 'px \n';
> }
> });
>
> ~~~
>
>
> Dort ist der Code nicht weiter erklärt, funktioniert aber.
Nein, das tut er nicht, AFAIS. Wenn man den Button schnell genug clickt (zwischen DOMContentLoaded und abgeschlossenem Laden des Bildes), dürfte 0 rauskommen.
Das Beispiel sollte umgebaut werden auf das `load`-Event des Bildes; und dann braucht man auch die Nutzerinteraktion und damit den Button nicht mehr.
🖖 Live long and prosper
{:@en}
--
*“In my home, the America I love, the America I've written about, that has been a beacon of hope and liberty for 250 years, is currently in the hands of a corrupt, incompetent and treasonous administration. Tonight, we ask all who believe in democracy and the best of our American spirit, to rise with us, raise your voices against authoritarianism, and let freedom reign.”*{:@en}
— Bruce Springsteen, Manchester 2025-05-14
img.naturalWidth
bearbeitet von
@@Matthias Scharwies
> Im SELF-Wiki gibt es ein Beispiel zu [images.naturalWidth](https://wiki.selfhtml.org/wiki/JavaScript/DOM/Document/images/naturalWidth)
>
> ~~~ JavaScript,bad
> 'use strict';
> document.addEventListener('DOMContentLoaded', function () {
> document.querySelector('#auslesen')
> .addEventListener('click', analyseImage);
>
> function analyseImage() {
> let image = document.querySelector('img');
> document.querySelector('output')
> .textContent = ' Höhe: ' + image.height + 'px \n' + ' Breite: ' + image.width +
> 'px \n' + ' orig. Höhe: ' + image.naturalHeight + 'px \n' +
> ' orig. Breite: ' + image.naturalWidth + 'px \n';
> }
> });
>
> ~~~
>
>
> Dort ist der Code nicht weiter erklärt, funktioniert aber.
Nein, das tut er nicht, AFAIS. Wenn man den Button schnell genug clickt (zwischen DOMContentLoaded und abgeschlossenem Laden des Bildes), dürfte 0 rauskommen.
🖖 Live long and prosper
{:@en}
--
*“In my home, the America I love, the America I've written about, that has been a beacon of hope and liberty for 250 years, is currently in the hands of a corrupt, incompetent and treasonous administration. Tonight, we ask all who believe in democracy and the best of our American spirit, to rise with us, raise your voices against authoritarianism, and let freedom reign.”*{:@en}
— Bruce Springsteen, Manchester 2025-05-14