Произошла ошибка.
Пожалуйста, обновите страницу.
Fly.js > Документация > Измерения > $(...).height()

$(...).height()

Устанавливает или возвращает высоту узлов в текущей FlyNode.

#Измерения #Стили

$(...).height()
$(...).height(value)

                    FlyDomNode: {
                        __constructor: function(context) {
                            var array = fnNodeList.makeDomNodeArray(context);
                            for (var a = 0, al = array.length; a < al; a++) {
                                this[a] = array[a];
                            }
                            this.length = al;
                        },

                        size: function() {
                            return this.length;
                        },

                        get: function(index) {
                            return $.isNumber(index) ? this[index] : [].slice.call(this);
                        },

                        addNode: function(flyNode) {
                            return fnNodeList.changeNodeContext(this, flyNode, function(child, context) {
                                context.indexOf(child) === -1 && context.push(child);
                            });
                        },

                        removeNode: function(flyNode) {
                            return fnNodeList.changeNodeContext(this, flyNode, function(child, context) {
                                var position = context.indexOf(child);
                                if (position !== -1) context.splice(position, 1);
                            });
                        },

                        eq: function(index) {
                            if (index < 0) index = index + this.length;
                            return new this.__self(this[index]);
                        },

                        lt: function(index) {
                            return new this.__self(this.slice(0, index));
                        },

                        gt: function(index) {
                            return new this.__self(this.slice(index));
                        },

                        last: function(selector) {
                            var element = this[this.length - 1];
                            return new this.__self(fnStyle.isMatch(element, selector) ? element : []);
                        },

                        first: function(selector) {
                            var element = this[0];
                            return new this.__self(fnStyle.isMatch(element, selector) ? element : []);
                        },

                        normalize: function() {
                            return fnNodeList.transformNodeContext(this, function(item, context) {
                                if ($.isNode(item)) context.push(item);
                            });
                        },

                        each: function(callback, context) {
                            $.each(this, callback, context);
                            return this;
                        },

                        name: function() {
                            return this[0].tagName.toLowerCase() || null;
                        }
                    }
                

$(...).height()
Возвращает: Number 123 or Null 0

Возвращает высоту контента для первого элемента текущей FlyNode в пикселах.

Если текущая FlyNode пустая, метод вернёт null.

Стоит отметить, что возвращаемое значение будет различным для разных значений свойства box-sizing.

Для объекта window метод вернёт высоту окна, а для объекта document - высоту документа.

Метод $(...).height() в отличие от $(...).css('height') всегда возвращает число - посчитанное браузером значение высоты в пикселах.

Пример: Измерение высоты различных объектов на странице.

<!DOCTYPE html>
    <head>
        <meta charset="utf-8"/>
        <title>Fly.js - $(...).height()</title>

        <script src="/scripts/fly.js"></script>
    </head>
    <body>
        <button id="window">Get $(window) height</button>
        <button id="document">Get $(document) height</button>
        <button id="div">Get $('div') height</button>

        <div style="height:30px; width:120px; background:yellow"></div>
        <p></p>

        <script>
            var storage = {
                    window: $(window),
                    document: $(document),
                    div: $('div')
                };

            $('button').on('click', function() {
                var id = $(this).attr('id');
                $('p').html(id + ' height is: ' + storage[id].height() + 'px');
            });
        </script>
    </body>
</html>

$(...).height(value)
Возвращает: FlyNode [$]

Устанавливает высоту для всех узлов текущей FlyNode.

value: Number 123 or String ABC

Новое значение для высоты узлов.

Устанавливает свойство height в значение value для каждого узла текущей FlyNode (кроме window, document и document.documentElement).

Пример: Изменение ширины блока.

<!DOCTYPE html>
    <head>
        <meta charset="utf-8"/>
        <title>Fly.js - $(...).height()</title>

        <script src="/scripts/fly.js"></script>
    </head>
    <body>
        <button>Change height!</button>
        <div style="height:50px; width:50px; background:yellow"></div>
        <script>
            var div = $('div'),
                sign = -1;

            $('button').on('click', function() {
                var current = div.height();
                if (current === 100 || current === 50) sign *= -1;
                div.height(current + 10 * sign);
            });
        </script>
    </body>
</html>