jQuery innerWidth() Method

jQuery HTML/CSS Methods

The innerWidth() method gets or sets the internal width of the selected element (including padding, but not including margin and border).

When using the innerWidth() methodGetWhen setting theThe first selected elementwidth.

When using the innerWidth() methodSetWhen setting theAll selected elementswidth.

As shown in the figure below, the innerWidth() method includes padding, but does not include margin and border:

The width value can also be relative. If a leading+=-If the value is a character sequence, calculate the target width by adding or subtracting the given number from the current value (for example, innerWidth("-= 100)）。

Syntax:

Get internal width:

$(selector).innerWidth()

Set internal width:

$(selector).innerWidth(value)

Example

Get the internal width of the DIV element:

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

Set the internal width of all paragraphs:

$("button").click(function(){
　　$("p").innerWidth()100);
});

Set the internal width of all paragraphs using different unit settings:

$("#btn1").click(function(){
　　$("p").innerWidth()100);
});
$("#btn2").click(function(){
　　$("p").innerWidth("10em");
});
$("#btn3").click(function(){
　　$("p").innerWidth("100vw");
});

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();
});

Parameter Value

jQuery HTML/CSS Methods