jQuery | height () и innerHeight () с примерами

Опубликовано: 14 Декабря, 2021

Высота () - это встроенный метод в jQuery, который используется для проверки высоты элемента, но не проверяет отступы, границы и поля элемента.
Синтаксис:

$ ("параметр"). height ()

Параметры: эта функция не принимает никаких параметров.
Возвращаемое значение: возвращает высоту выбранного элемента.

Код jQuery для демонстрации работы функции height ()
Код №1:

 < html >
 
< head >
    < script src=" https://ajax.googleapis.com/ajax/libs/
                 jquery/3.3.1/jquery.min.js"></ script >
    < script >
        $(document).ready(function() {
            $("button").click(function() {
                var msg = "";
                msg += "height of div: " + $("#demo").height();
                $("#demo").html(msg);
            });
        });
    </ script >
    < style >
        #demo {
            height: 150px;
            width: 350px;
            padding: 10px;
            margin: 3px;
            border: 1px solid blue;
            background-color: lightgreen;
        }
    </ style >
 </ head >
 
< body >
    < div id = "demo" ></ div >
    < button >Click Me!!!</ button >
    < p >Click on the button and check the height of the
       element(excluding padding).</ p >
 </ body >
 
</ html > 

Выход:
Перед тем, как нажать кнопку «Click Me» -

После нажатия на кнопку «Click Me» -

jQuery также включает метод innerHeight (), то есть он используется для проверки внутренней высоты элемента, включая отступы.
Синтаксис:

$ ("параметр"). innerHeight ()

Параметры: эта функция не принимает никаких параметров.
Возвращаемое значение: возвращает внутреннюю высоту выбранного элемента.
Код №2:

 < html >
 
< head >
    < script src=" https://ajax.googleapis.com/ajax/libs/
                 jquery/3.3.1/jquery.min.js"></ script >
    < script >
        $(document).ready(function() {
            $("button").click(function() {
                var msg = "";
                msg += "Inner Height of div: " + $("#demo").
                        innerHeight() + "</ br >";
                $("#demo").html(msg);
            });
        });
    </ script >
 </ head >
 < style >
    #demo {
        height: 150px;
        width: 350px;
        padding: 10px;
        margin: 3px;
        border: 1px solid blue;
        background-color: lightgreen;
    }
 </ style >
 
< body >
    < div id = "demo" ></ div >
    < button >Click Me!!!</ button >
    < p >Click on the button and check the innerHeight of
       an element(includes padding).</ p >
 </ body >
 
</ html > 

Выход:
Перед тем, как нажать кнопку «Click Me» -

После нажатия на кнопку «Click Me» -

JavaScript JQuery

jQuery | height () и innerHeight () с примерами

РЕКОМЕНДУЕМЫЕ СТАТЬИ