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

Похожие посты

Руководство по синтаксису в jQuery

Оператор jQuery обычно начинается со знака доллара ($) и заканчивается точкой с запятой (;). В jQuery знак доллара ($) — это просто псевдоним для jQuery. Давайте рассмотрим следующий пример кода, который демонстрирует синтаксис кода на jQuery. Приведенный выше пример просто отображает предупреждающее сообщение «Hello World!» пользователю. Объяснение кода Давайте разберем приведенный выше пример подробнее. Тег…

Руководство по методу animate() в jQuery

jQuery-метод animate() используется для создания пользовательских анимаций. Метод animate() обычно используется для анимации числовых CSS-свойств, таких как width, height, margin, padding, opacity, top, left и т. д., Но нечисловые свойства, такие как color или background-color нельзя анимировать с помощью базовой функциональности jQuery. Не все CSS-свойства являются анимируемыми. Как правило, любое CSS-свойство, которое принимает значения в…

Руководство по callback-функциям в jQuery

Операторы JavaScript выполняются построчно. Но, поскольку для завершения эффекта jQuery требуется некоторое время, код следующей строки может выполняться, пока предыдущий эффект все еще выполняется. Чтобы этого не происходило, jQuery предоставляет функцию обратного вызова (Callback) для каждого метода. Функция обратного вызова — это функция, которая выполняется после завершения эффекта. Функция обратного вызова передается в качестве аргумента…

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

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

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

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