Ottenere informazioni di elementi HTML con jQuery
Durante la fase di sviluppo di un sito web spesso capita di dover recuperare informazioni riguardanti tag HTML, in quest’operazione possiamo avvalerci di jQuery, nostro validissimo alleato.
Vediamo qualche esempio per comprendere meglio.
Ottenere la classe di un elemento
Per un qualsiasi elemento dotato di ID possiamo scovare la classe (o le classi) associate ad esso. Prendiamo in ipotesi un paragrafo con identificativo “testo”:
$(‘#testo’).attr(‘class’);
La funzione .attr() permette di ottenere tutte le informazioni riguardanti gli attributi di un tag HTML. Nel caso volessimo ottenere il percorso di un’immagine con identificativo “thumb”:
$(‘#thumb’).attr(‘src’);
Ottenere il valore di un elemento
Discorso diverso se si vuole ottenere il valore di un input.
Ipotizziamo di volere sapere il valore di una textbox con identificativo “textvalue”:
$(‘textvalue’).val();
Ottenere dimensioni in pixel di un elemento
Il Javascript inoltre permette di poter ottenere le dimensioni di immagini ed elementi come ad esempio i div.
Nel caso di un immagine con ID “logo” :
$(‘#logo’).height(); $(‘#logo’).width();
Negli script di jQuery potreste anche trovare una dicitura del genere:
var $logo = $(‘#logo’); $logo.height(); $logo.width();
Nonostante la sintassi sia differente il risultato è lo stesso. Le variabili anticipate dal simbolo “$” solitamente stanno a significate che quello è un oggetto jQuery. Tale associazione è accostabile al classico “document.getElementById()” classico del Javascript :
var logo = document.getElementById(‘logo’);
Come di consueto potete scaricare un esempio dal tasto Download:
Info sull' autore:
Appassionato di "web" fin dall'arrivo in casa del primo modem sono diventato nel 2008 uno Sviluppatore Web per Acktel. Sono un amante delle "novità" e dei nuovi linguaggi ma anche di grafica e disegno. Tutte le novità che scopro le condivido sul il mio BlogLeggi gli altri articoli di Alessandro Alessio
Ciao, provo a ottenere le dimensioni delle immagini anche con browser come safari e chrome, ma mi restituisce 0
$(document).ready(function(){
console.log($(‘#logo’).width());
console.log($(‘#logo’).height());
});
Tu riesci?
SAluti
Ciao Marcello, attenzione che nel caso l’elemento con ID “logo” sia un’immagine è necessario specificare nell’HTML gli attributi height e width nel tag.