В 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>

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.