Metodo height() di jQuery

Metodi HTML/CSS jQuery

Il metodo height() di jQuery ottiene o imposta l'altezza degli elementi selezionati.

quando il metodo height() viene utilizzatoottenerequando la altezza degli elementi selezionati viene impostata, essa restituisceil primo elemento selezionatoaltezza.

quando il metodo height() viene utilizzatoimpostarequando la altezza degli elementi selezionati viene impostata, essa settatutti gli elementi selezionatialtezza.

Come illustrato di seguito, il metodo height() non include padding, border o margin:

L'altezza può anche essere relativa. Se viene fornito un valore, è necessario specificare il prefisso+=o-=Se la sequenza di caratteri è fornita, la altezza di destinazione viene calcolata aggiungendo o sottraendo il valore fornito dal valore corrente (ad esempio height("+ = 50")).

Sintassi:

Ottieni l'altezza:

$(selector).height()

Imposta l'altezza:

$(selector).height(value)

Imposta l'altezza utilizzando una funzione:

$(selector).height(function(index, currentHeight))

Esempio

Ottieni l'altezza dell'elemento DIV:

$("div").click(function(){
　　$(this).height();
});

Imposta l'altezza di tutti i paragrafi:

$("button").click(function(){
　　$("p").height(50);
});

Imposta l'altezza di tutti i paragrafi con unità diverse:

$("#btn1").click(function(){
　　$("p").height(50);
});
$("#btn2").click(function(){
　　$("p").height("7em");
});
$("#btn3").click(function(){
　　$("p").height("100vh");
});

Quando si clicca sul pulsante, aumenta l'altezza di tutti i paragrafi (usando la funzione):

$("button").click(function(){
　　$("p").height(function(i, val){
　　　　return val * 2;
　　});
});

Il metodo height() può anche trovare l'altezza della finestra e del documento:

$(window).height(); // Restituisce l'altezza della finestra del browser
$(document).height(); // Restituisce l'altezza del documento HTML

Mostra la differenza tra width(), height(), innerHeight(), innerWidth(), outerWidth() e outerHeight():

$("button").click(function(){
　　$("div").width();
　　$("div").innerWidth();
　　$("div").outerWidth();
　　$("div").height();
　　$("div").innerHeight();
　　$("div").outerHeight();
});

Aggiungi un effetto di scorrimento fluido quando l'utente scorre la pagina:

let size = $(".main").height(); // 获取".main" 高度
$(window).keydown(function(event) {}}
　　if(event.which === 40) { // Se premo la freccia giù
　　　　$("html, body").animate({scrollTop: "+=" + size}, 300);
　　} else if(event.which === 38) { // Se premo la freccia su
　　　　$("html, body").animate({scrollTop: "-=" + size}, 300);
　　}
});

Valore del parametro

Metodi HTML/CSS jQuery