Come ottenere le dimensioni dell'immagine in JavaScript

Spesso incontriamo situazioni in cui vogliamo regolare le dimensioni delle immagini per la struttura e la regolazione corretti del modello Object Model (DOM) complessivi durante il test di una pagina Web o di un sito Web. Ad esempio, nel caso di regolare lo spazio da riservare per una particolare immagine, viene caricato. In tali casi, è possibile utilizzare i diversi metodi JavaScript per ottenere dimensioni dell'immagine in JavaScript.

Questo articolo discuterà i metodi per ottenere le dimensioni dell'immagine in JavaScript.

Come ottenere le dimensioni dell'immagine in JavaScript?

Per ottenere le dimensioni dell'immagine in JavaScript, è possibile utilizzare i seguenti approcci:

• "larghezza" E "altezza" proprietà
• "documento.QuerySelector ()Metodo e "al clic"Evento
• "addEventListener ()" metodo

Passare attraverso i metodi discussi uno per uno!

Metodo 1: Ottieni le dimensioni dell'immagine in JavaScript usando le proprietà di larghezza e altezza

IL "altezza" E "larghezza"Proprietà imposta l'altezza e la larghezza dell'elemento specificato. Queste proprietà possono essere utilizzate insieme a una parola chiave che si riferisce all'oggetto corrente per ottenere le dimensioni dell'immagine.

Sintassi

oggetto.stile.larghezza

Nella sintassi data, la larghezza dell'oggetto specificato verrà recuperata.

oggetto.stile.altezza

Qui, l'altezza dell'oggetto aggiunto verrà recuperata.

Esempio

Innanzitutto, crea un'istanza di istanza di htmlimageElement utilizzando il costruttore Image () e accedere all'immagine a cui si accede per le dimensioni specificando il suo percorso:

var Dimensions = new Image ();
dimensioni.src = 'modello.jpg ';

Successivamente, applica un evento Onload in modo tale che quando la finestra si carica, il "larghezza" e il "altezza"Proprietà insieme all'oggetto accedere all'altezza e alla larghezza dell'immagine specifica e visualizzarla tramite avviso:

dimensioni.onload = function ()
Avviso (questo.larghezza + 'x' + questo.altezza);

L'output corrispondente sarà il seguente:

Metodo 2: Ottieni le dimensioni dell'immagine in JavaScript usando il documento.Metodo QuerySelector () ed evento OnClick

IL "documento.QuerySelector ()"Il metodo ottiene il primo elemento corrispondente a un selettore CSS e"al clic"L'evento si verifica quando l'utente fa clic su un elemento. Questi metodi possono essere utilizzati in combinazione per accedere al percorso dell'immagine e recuperare la sua dimensione sul clic del pulsante.

Sintassi

documento.QuerySelector (selettori CSS)

Qui, "Selettori CSS"Rappresenta uno o più di un selettore CSS.

oggetto.onclick = imgsize () myscript;

Nella sintassi sopra, "imgsize ()"Si riferisce alla funzione che verrà invocata quando un"al clic"L'evento viene attivato.

Esempio

Nel seguente esempio, creeremo un pulsante e collegheremo un evento OnClick che invocherà la funzione IMGSIZE () quando attivata:

Ottieni dimensioni dell'immagine

Ora, specifica il percorso dell'immagine in ""Tag:

Successivamente, definisci una funzione chiamata "imgsize ()". Nella sua definizione, accedi all'immagine e prendi la sua larghezza e altezza usando rispettivamente la larghezza e le proprietà di altezza, come discusso nel metodo precedente e visualizzarla nella casella di allerta:

funzione imgsize ()
var dimensioni = documento.QuerySelector ("#Dim");
var width = dimensioni.larghezza;
var height = dimensioni.altezza;
avviso ("larghezza originale =" + larghezza + "," + "altezza originale =" + altezza);

Produzione

Metodo 3: Ottieni le dimensioni dell'immagine in JavaScript usando il metodo addEventListener ()

IL "addEventListener ()"Il metodo allega un gestore di eventi a un documento. Questo metodo può essere implementato per accedere al pulsante e all'immagine creati e applicare un clic per ottenere le dimensioni dell'immagine al momento del clic del pulsante.

Sintassi

documento.addEventListener (clic, funzione)

Nella sintassi sopra, "clic"Si riferisce all'evento specificato e"funzione"È la funzione che verrà invocata, rispettivamente.

Esempio

Innanzitutto, crea un pulsante e specifica il percorso dell'immagine con un particolare altezza e valori di larghezza:

Ottieni dimensioni dell'immagine
= "dimensione">

---

style = "altezza: 300px; larghezza: 300px;"

Ora accedi al pulsante creato e all'immagine specifica usando "documento.QuerySelector ()" metodo.

Quindi, aggiungi l'evento "clic"Al pulsante e applicare la larghezza naturale e le proprietà naturali per disconnettersi la larghezza e l'altezza originali di un'immagine:

let btn = documento.QuerySelector ('Button');
Let Dimensions = Document.QuerySelector ('#size');
lascia img = documento.QuerySelector ('IMG');
btn.addEventListener ('Click', () =>
dimensioni.InnerText = 'altezza: $ img.Naturalheight larghezza: $ img.NaturalWidth ';
);

Produzione

Abbiamo spiegato i metodi più semplici per ottenere le dimensioni dell'immagine in JavaScript.

Conclusione

Per ottenere le dimensioni dell'immagine in JavaScript, utilizzare il “larghezza" E "altezza"Proprietà per creare un oggetto e accedere alla larghezza e all'altezza dell'immagine specifica, rispettivamente,"documento.QuerySelector ()Metodo e "al clic"Evento per accedere al percorso dell'immagine e ottenere la sua dimensione sul clic del pulsante o"addEventListener ()"Metodo per accedere al pulsante e all'immagine creati e applica un clic di clic per ottenere le dimensioni dell'immagine corrispondenti. Questo blog ha spiegato i metodi per ottenere le dimensioni dell'immagine in JavaScript.