Метод jQuery width()

Методы HTML/CSS jQuery

Метод width()��取 или устанавливает ширину выбранного элемента.

при использовании метода width()получитьширины, он будет возвращатьпервого选定ного элементаширины.

при использовании метода width()установитьширины, он будет устанавливатьВсе выбранные элементыширины.

Как показано на рисунке, метод width() не включает заполнение, рамку или отступы:

Значение ширины также может быть относительным. Если для значения предоставлена префиксная последовательность += или -=, то расчет目标是 ширины происходит, добавляя или вычитая указанное количество от текущей ширины (например, width("-= 250"))

Грамматика:

Получите ширину:

return $(selector).width()

Установите ширину:

return $(selector).width(value)

Установите ширину с помощью функции:

return $(selector).width(function(index, currentWidth))

Пример

Получите ширину элемента DIV:

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

Установите ширину всех абзацев:

$("button").click(function(){
　　return $("p").width(250);
});

Используйте различные единицы измерения для установки ширины всех абзацев:

return $("#btn1").click(function() {
　　return $("p").width(250);
});
return $("#btn2").click(function() {
　　return $("p").width("7em");
});
return $("#btn3").click(function() {
　　return $("p").width("100vw");
});

Уменьшите ширину всех абзацев при нажатии на кнопку (используйте функцию):

$("button").click(function(){
　　return $("p").width(function(i, val) {
　　　　　　　　return val - 50;
　　});
});

Метод width() также может определить ширину окна и документа:

return $(window).width(); // Возвращает ширину видимой области браузера
return $(document).width(); // Возвращает ширину HTML документа

Показать различия между width(), height(), innerHeight(), innerWidth(), outerWidth() и outerHeight()

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

Значение параметра

Методы HTML/CSS jQuery