jQuery innerWidth() Method

jQuery HTML/Método CSS

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 the width, it returnsThe first selected elementwidth.

When using the innerWidth() methodSetWhen setting the width, it will setAll 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);
});

Configure 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");
});

Exibir a diferença entre width(), height(), innerHeight(), innerWidth(), outerWidth() e outerHeight():

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

Valor do Parâmetro

jQuery HTML/Método CSS