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

$(...).css()

Устанавливает или возвращает CSS стили для каждого узла текущей FlyNode.

#Стили

$(...).css(property)
$(...).css(property, value)
$(...).css(properties)

                    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;
                        }
                    }

Чтобы понимать принцип работы таких методов как $(...).css(), $(...).stylize() и $(...).animate(), настоятельно рекомендуется прочитать статью Самые забавные фишки Fly.js. Это поможет избежать многих ошибок и недоразумений.

$(...).css(property)
Возвращает: String ABC

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

property: String ABC

Название CSS свойства.

Значение возвращается вместе с единицами измерения.

Если требуется измерить ширину или высоту элемента, можно также пользоваться методами $(...).width() и $(...).height() (а также их аналогами).

Пример: Получение значения CSS свойства.

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

        <script src="/scripts/fly.js"></script>
        <style>
            div {
                height: 50px; width: 100px;
                background: red; position: relative;
                left: 30px; top: 10px;
                opacity: 0.5;
            }
        </style>
    </head>
    <body>
        <b></b>
        <div></div>

        <script>
            var div = $('div'),
                properties = ['height', 'position', 'opacity'];
            $('b').html($.map(properties, function(value) {
                return value + ': ' + div.css(value) + ';'
            }).join(' '));
        </script>
    </body>
</html>

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

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

property: String ABC

Название CSS свойства.

value: String ABC

Значение CSS свойства.

Аргумент value должен содержать единицы измерения.

Пример: Установка значения для CSS свойства.

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

        <script src="/scripts/fly.js"></script>
        <style>
            div {
                height: 30px; width: 50px;
                background: red; position: relative;
                left: 10px; top: 5px;
            }
        </style>
    </head>
    <body>
        <button>Change left!</button>
        <div></div>

        <script>
            $('button').on('click', function() {
                $('div').css('left', $.random(200) + 'px');
            });
        </script>
    </body>
</html>

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

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

properties: Object {}

Объект с CSS свойствами.

Обратите внимание, что метод $(...).css() не работает с пресетами, поэтому аргумент properties может быть представлен только в виде объекта. Если требуется применить стили из пресетов, то следует воспользоваться методом $(...).stylize().

Каждый ключ объекта properties - это название CSS свойства, которое нужно установить в соответствующее значение.

Пример: Установка значений для множества CSS свойств.

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

        <script src="/scripts/fly.js"></script>
    </head>
    <body>
        <button>Update!</button>
        <div></div>

        <script>
            $('div').css({
                position: 'relative',
                height: '50px',
                width: '50px',
                backgroundColor: '#0f08'
            });
            $('button').on('click', function() {
                var color = [
                        $.random(360),
                        $.random(100),
                        $.random(100),
                        $.random(100) / 100
                    ].join(',');

                $('div').css({
                    left: $.random(200) + 'px',
                    backgroundColor: 'hsla(' + color + ')'
                });
            });
        </script>
    </body>
</html>