jQuery Miscellaneous

jQuery HTML/CSS Methods

jQuery height() Method

first selected elementThe height() method gets or sets the height of the selected element.Getheight, it will returnof all selected elements

first selected elementWhen the height() method is usedSetWhen setting the height, it will setof all selected elements

As shown in the figure below, the height() method does not include padding, border or margin:

The height value can also be relative. If a leading+=or-=A character sequence, then calculate the target height by adding or subtracting the given value from the current value (for example height("+ = 50"））。

Syntax:

Get height:

$(selector).height()

Set height:

$(selector).height(value)

Set height using a function:

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

Example

Get the height of the DIV element:

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

Set the height of all paragraphs:

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

Set the height of all paragraphs using different units:

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

Increase the height of all paragraphs when the button is clicked (using the function):

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

The height() method can also find the height of the window and document:

$(window).height();//　Return the height of the browser window
$(document).height();　　//　Return the height of the HTML document

Show the difference between width(), height(), innerHeight(), innerWidth(), outerWidth() and outerHeight():

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

Add a smooth scrolling effect when the user scrolls the page:

let size = $(".main").height();　//　Get the height of ".main"
$(window).keydown(function(event) {
　　if(event.which ===　40) {　//　If the down arrow key is pressed
　　　　$("html, body").animate({scrollTop: "+="　+　size},　300);
　　} else if(event.which ===　38) {　//　If the up arrow key is pressed
　　　　$("html, body").animate({scrollTop: "-="　+　size},　300);
　　}
});

Parameter Value

jQuery HTML/CSS Methods