Свойства css через jquery

Свойства css через jquery

Возвращает/устанвливает значения css-свойств у выбранных элементов страницы.

version added: 1.0 .css( propertyName )

version added: 1.0 .css( propertyName, value )

version added: 1.4 .css( propertyName, function(index, value) )

version added: 1.0 .css( map )

Пример 1. Кликая по блокам, чтобы унать из цвет:

$("div").click(function () < var color = $(this).css("background-color"); $("#result").html("Цвет этого блока " + color + "."); >);

Пример 2. Устанавливаем несколько свойств параграфу:

Кликните по этому параграфу
 

Пример 3. Задействуем пользовательскую функцию, кликая по параграфу увеличиваем размер его шрифта в 2 раза:

Параграф 1
 
Параграф 2
 
Параграф 3
 
Параграф 4
 

Шпаргалка jQuery:

• Ajax
  • Global Ajax Event Handlers
    • .ajaxComplete()
      • :button
      • :checkbox
      • :checked
      • :disabled
      • :enabled
      • :file
      • :focus
      • :image
      • .serializeArray()
      • .serialize()
      • jQuery.param()
      • jQuery.ajax()
      • jQuery.ajaxSetup()
      • jQuery.ajaxPrefilter()
      • jQuery.ajaxTransport()
      • jQuery.get()
      • jQuery.post()
      • .load()
      • jQuery.getJSON()
      • jQuery.getScript()
      • .serialize()
      • .serializeArray()
      • jQuery.param()
      • .val()
      • .blur()
      • .change()
      • .focus()
      • .addClass()
      • .hasClass()
      • .removeClass()
      • .toggleClass()
      • .html()
      • .removeAttr()
      • .prop()
      • .removeProp()
      • .attr()
      • .val()
      • Collection Manipulation
        • jQuery.param()
        • .data()
        • .removeData()
        • Class Attribute
          • .addClass()
          • .hasClass()
          • .removeClass()
          • .toggleClass()
          • .clone()
          • .wrap()
          • .wrapAll()
          • .wrapInner()
          • .unwrap()
          • .append()
          • .appendTo()
          • .html()
          • .text()
          • .prepend()
          • .prependTo()
          • .after()
          • .before()
          • .insertAfter()
          • .insertBefore()
          • .unwrap()
          • .remove()
          • .empty()
          • .detach()
          • .replaceAll()
          • .replaceWith()
          • .removeProp()
          • .removeAttr()
          • .prop()
          • .attr()
          • .val()
          • .css()
          • .height()
          • .width()
          • .innerHeight()
          • .innerWidth()
          • .outerHeight()
          • .outerWidth()
          • .offset()
          • .position()
          • .scrollLeft()
          • .scrollTop()
          • .height()
          • .width()
          • .innerHeight()
          • .innerWidth()
          • .outerHeight()
          • .outerWidth()
          • jQuery.holdReady()
          • jQuery()
          • jQuery.noConflict()
          • jQuery.when()
          • .addClass()
          • .hasClass()
          • .removeClass()
          • .toggleClass()
          • .css()
          • .height()
          • .width()
          • .innerHeight()
          • .innerWidth()
          • .outerHeight()
          • .outerWidth()
          • .offset()
          • .position()
          • .scrollLeft()
          • .scrollTop()
          • .clearQueue()
          • .dequeue()
          • .data()
          • jQuery.hasData()
          • jQuery.removeData()
          • jQuery.dequeue()
          • .removeData()
          • jQuery.data()
          • .queue()
          • Custom
            • .clearQueue()
            • .dequeue()
            • .queue()
            • .clearQueue()
            • .dequeue()
            • jQuery.dequeue()
            • jQuery.data()
            • .queue()
            • jQuery.proxy()
            • callbacks.add()
            • callbacks.disable()
            • callbacks.disabled()
            • callbacks.empty()
            • callbacks.fire()
            • callbacks.fired()
            • callbacks.fireWith()
            • callbacks.has()
            • callbacks.lock()
            • callbacks.locked()
            • callbacks.remove()
            • jQuery.Callbacks()
            • deferred.always()
            • deferred.done()
            • deferred.fail()
            • deferred.notify()
            • deferred.notifyWith()
            • deferred.progress()
            • deferred.promise()
            • deferred.reject()
            • deferred.rejectWith()
            • deferred.resolve()
            • deferred.resolveWith()
            • deferred.state()
            • deferred.then()
            • Basics
              • Универсальный селектор (“*”)
              • jQuery( «.class» )
              • Селектор элементов (“element”)
              • Селектор ID (“#id”)
              • Множественный (“selector1, selector2, selectorN”)
              • Селектор по префиксу [name|=”value”]
              • Селектор содержащий значение [name*=»value»]
              • Селектор, содержащий слово [name~=»value»]
              • Селектор по атрибуту, на конце которого [name$=»value»]
              • Селектор по равенству [name=»value»]
              • Селектор по неравенству [name!=»value»]
              • Значение атрибута начинается с [name^=»value»]
              • Селектор по наличию атрибута [name]
              • Множественный селектор по атрибуту [name=»value»][name2=»value2″]
              • :animated Selector
              • :eq()
              • :even
              • :first
              • :focus
              • :gt()
              • :header
              • :lang()
              • :last
              • :lt()
              • :first-child
              • :first-of-type
              • :last-child
              • :last-of-type
              • :nth-child()
              • :nth-last-child()
              • :nth-last-of-type()
              • :nth-of-type()
              • :only-child
              • :only-of-type
              • :contains()
              • :empty
              • :has()
              • :parent
              • Browser Events
                • .resize()
                • .scroll()
                • .ready()
                • .bind()
                • .delegate()
                • jQuery.proxy()
                • .off()
                • .one()
                • .trigger()
                • .triggerHandler()
                • .unbind()
                • .undelegate()
                • event.currentTarget
                • event.data
                • event.delegateTarget
                • event.isDefaultPrevented()
                • event.isImmediatePropagationStopped()
                • event.isPropagationStopped()
                • event.metaKey
                • event.namespace
                • event.pageX
                • event.pageY
                • event.preventDefault()
                • event.relatedTarget
                • event.result
                • event.stopImmediatePropagation()
                • event.stopPropagation()
                • event.target
                • event.timeStamp
                • event.type
                • event.which
                • .blur()
                • .change()
                • .focus()
                • .focusin()

                ТОП-10 Хостеров:

                Шпаргалки:

                Получать новые уроки на E-mail:

                RSS подписка

                

                

                Авторизация

                Рекомендуем

                © 2023 Евгений Попов. Все права защищены. Служба поддержки
                Сайт мониторится с помощью сервиса ping-admin 🙂

                Источник

                jQuery — css() Method

                The css() method sets or returns one or more style properties for the selected elements.

                Return a CSS Property

                To return the value of a specified CSS property, use the following syntax:

                The following example will return the background-color value of the FIRST matched element:

                Example

                Set a CSS Property

                To set a specified CSS property, use the following syntax:

                The following example will set the background-color value for ALL matched elements:

                Example

                Set Multiple CSS Properties

                To set multiple CSS properties, use the following syntax:

                The following example will set a background-color and a font-size for ALL matched elements:

                Example

                jQuery Exercises

                jQuery CSS Reference

                For a complete overview of all jQuery CSS methods, please go to our jQuery HTML/CSS Reference.

                

                COLOR PICKER

                

                

                Report Error

                If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

                Thank You For Helping Us!

                Your message has been sent to W3Schools.

                Top Tutorials

                Top References

                Top Examples

                Get Certified

                W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

                Источник

                Получение и установка CSS-свойств элементам в jQuery

                

                В jQuery работа со стилями HTML элементов осуществляется через метод css . Данный метод используется как получения значения стилей, так и для их добавления, изменения и удаления.

                Как получить стиль элемента в jQuery

                Первый вариант метода css — это получение окончательного значения CSS-свойства непосредственно применяемого к элементу.

                // Вариант 1 (получение окончательного одного CSS свойства) .css( propertyName ) // propertyName (тип: Строка) – имя CSS-свойства, значение которого нужно получить .css( propertyNames ) // propertyName (тип: Массив) – массив, состоящий из одного или нескольких CSS-свойств, значения которых нужно получить

                Данный метод, если его применить к набору элементов, возвращает значение CSS свойства только для первого его элемента.

                Пример, в котором получим цвет фона непосредственно применённого к элементу #header :

                var bgHeader = $('#header').css('background-color');

                В jQuery названия CSS-свойств можно указывать как в CSS, так и как это принято в JavaScript. Т.е. убирать дефисы и заменять буквы, следующие за каждым дефисом на прописные.

                // можно и так var bgHeader = $('#header').css('backgroundColor');

                Если необходимо получить значения указанного CSS свойства или набора этих свойств у всех элементов текущего набора, то в этом случае необходимо использовать, например, метод each.

                Например, определим значение свойства display у всех выбранных элементов и выведем их в консоль:

                // переберём все элементы .container $('.container').each(function(index){ // значение css-свойства display текущего элемента набора var display = $(this).css('display'); // выведем результат в консоль (индекс элемента в наборе и его значение css-свойства display) console.log(index + '. display = '+ display); });

                Кроме этого, метод css позволяет также получить сразу несколько CSS свойств у элемента.

                Например, при нажатии на HTML элемент div выведим его ширину и высоту:

                 .  

                Как изменить или добавить стиль к элементу в jQuery

                Установить стиль элементу осуществляется тоже с помощью метода css, но в этом случае используется следующий синтаксис:

                // 1 вариант (для установки одного стиля элементу) .css( propertyName, value ) // 2 вариант (установка значения стиля с помощью функции) css( propertyName, function ) // 3 вариант (для установки несколько стилей элементу) css( properties ) // Описание параметров: // propertyName (тип: String) – имя CSS-свойства // value (тип: String или Number) – значение, которое нужно установить CSS-свойству // function – функция, результат выполнения которой будет установлен в качестве значения CSS-свойству // Синтаксис функции: // Function( Integer index, String value ) => String или Number // В качестве аргументов функция получает индекс элемента (index) и текущее окончательное значение CSS-свойства (value) // properties (тип: объект JavaScript, содержащий ноль или более пар ключ-значение) – объект, состоящий из пар DOM-свойство-значение, которые нужно установить элементу.

                При установлении стилей с помощью метода css , они задаются ко всем элементам текущего набора.

                Например, добавим ко всем элементам .info серый цвет фона (background):

                Если необходимо применить к каждому элементу текущего набора сразу несколько CSS свойств, то в качестве параметра этого метода необходимо использовать объект JavaScript, содержащий пары ‘имяСвойства’ : значение.

                .css({'имяСвойства1':значение, 'имяСвойства2':значение. })

                Пример, в котором показано как можно задать несколько CSS-свойств к элементам .success :

                $('.success').css({ 'color':'green', 'font-size':'16px' });

                В качестве значения строки также можно использовать относительные значения, которые начинаются с += или -= . Первое выражение используется для увеличения текущего значения CSS свойства, а второе — для уменьшения.

                Например, увеличим отступ слева и справа у элементов .container на 10px :

                $('.container').css({ "padding-left": "+=10", "padding-right":"+=10" });

                Ещё один способ использования метода css — это применение в качестве 2 параметра функции.

                .css('имяСвойства',функция) // функция: Function( Integer index, String value ) => String или Number

                Вариант использования метода css, у которого в качестве второго параметра используется функция обычно находить применение, когда значение необходимо как-то вычислить или определить по какому-то алгоритму.

                Например, установим всем элементам .text , у которых цвет шрифта не равен чёрному, CSS свойство color , равное red .

                $('.text').css('color',function(index,value){ if (value!=='rgb(0, 0, 0)') { return 'red'; } });

                Например, поменяем значение CSS свойства width у всех элементов img на странице, находящихся #content :

                Как удалить определённый стиль у элемента

                Для того чтобы в jQuery убрать определённый стиль у элемента, ему необходимо присвоить просто пустую строку.

                Например, уберём у всех изображений на странице CSS свойство height :

                Источник

                Читайте также:  Telegram bot php reply