В jQuery есть несколько методов, таких как height(), innerHeight(), outerHeight(), width(), innerWidth() и outerWidth(), чтобы получить и установить размеры CSS для элементов. Посмотрите на следующую иллюстрацию, чтобы понять, как эти методы вычисляют размеры бокса элемента.
jQuery-методы width() и height()
jQuery-методы width() и height() получают или устанавливают width и height элемента соответственно. Эта ширина и высота не включают padding, border и margin элемента. Следующий пример вернет ширину и высоту элемента <div>.
<script>
$(document).ready(function(){
$("button").click(function(){
var divWidth = $("#box").width();
var divHeight = $("#box").height();
$("#result").html("Width: " + divWidth + ", " + "Height: " + divHeight);
});
});
</script>Точно так же вы можете установить ширину и высоту элемента, включив значение в качестве параметра в методы width() и height(). Значением может быть либо строка (число и единица измерения, например, 100px, 20em и т. д.), либо просто число. В следующем примере ширина элемента <div> будет установлена равной 400 пикселям, а высота — 300 пикселям соответственно.
<script>
$(document).ready(function(){
$("button").click(function(){
$("#box").width(400).height(300);
});
});
</script>Используйте jQuery-методы width() или height(), если вы хотите использовать ширину или высоту элемента в математических вычислениях, поскольку они возвращают значения свойств width и height без единицы измерения (например, 400), тогда как методы css("width") или css("height") возвращают значение с единицами измерения (например, 400px).
jQuery-методы innerWidth() и innerHeight()
jQuery-методы innerWidth() и innerHeight()получают или устанавливают внутреннюю ширину и внутреннюю высоту элемента соответственно. Эта внутренняя ширина и высота включает padding, но не включает border и margin элемента. Следующий пример вернет внутреннюю ширину и высоту элемента <div> одним нажатием кнопки.
<script>
$(document).ready(function(){
$("button").click(function(){
var divWidth = $("#box").innerWidth();
var divHeight = $("#box").innerHeight();
$("#result").html("Inner Width: " + divWidth + ", " + "Inner Height: " + divHeight);
});
});
</script>Точно так же вы можете установить внутреннюю ширину и высоту элемента, передав значение в качестве параметра методу innerWidth() и innerHeight(). Эти методы изменяют только ширину или высоту области содержимого элемента в соответствии с указанным значением.
Например, если текущая ширина элемента составляет 300 пикселей, а сумма левого и правого отступов равна 50 пикселям, то новая ширина элемента после установки внутренней ширины 400 пикселей составлит 350 пикселей, т.е. New Width = Inner Width - Horizontal Padding. Точно так же вы можете посчитать изменение высоты.
<script>
$(document).ready(function(){
$("button").click(function(){
$("#box").innerWidth(400).innerHeight(300);
});
});
</script>jQuery-методы outerWidth() и outerHeight()
jQuery-методы outerWidth() и outerHeight() получают или устанавливают внешнюю ширину и внешнюю высоту элемента соответственно. Эта внешняя ширина и высота включает padding и border, но не включают margin элемента. Следующий пример вернет внешнюю ширину и высоту элемента <div> одним нажатием кнопки.
<script>
$(document).ready(function(){
$("button").click(function(){
var divWidth = $("#box").outerWidth();
var divHeight = $("#box").outerHeight();
$("#result").html("Outer Width: " + divWidth + ", " + "Outer Height: " + divHeight);
});
});
</script>Вы также можете получить внешнюю ширину и высоту, которые включают padding и border, а также margin элемента. Для этого просто укажите параметр true для методов outerWidth(true) и outerHeight(true).
<script>
$(document).ready(function(){
$("button").click(function(){
var divWidth = $("#box").outerWidth(true);
var divHeight = $("#box").outerHeight(true);
$("#result").html("Outer Width: " + divWidth + ", " + "Outer Height: " + divHeight);
});
});
</script>Точно так же вы можете установить внешнюю ширину и высоту элемента, передав значение в качестве параметра методам outerWidth() и outerHeight(). Эти методы изменяют только ширину или высоту области содержимого элемента в соответствии с указанным значением, как и методы innerWidth() и innerHeight().
Например, если текущая ширина элемента составляет 300 пикселей, а сумма левого и правого отступа равна 50 пикселям, а сумма ширины левой и правой границы равна 20 пикселям. Элемент после установки внешней ширины в 400 пикселей будет равен 330 пикселям, т.е. New Width = Outer Width - (Horizontal Padding + Horizontal Border). Точно так же вы можете посчитать изменение высоты.
<script>
$(document).ready(function(){
$("button").click(function(){
$("#box").outerWidth(400).outerHeight(300);
});
});
</script>
