Jquery поменять свойства css

Jquery поменять свойства css

Возвращает/устанвливает значения 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 🙂

                Источник

                Получение и установка 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 :

                Источник

                Как изменить CSS элементов с помощью jQuery?

                Никак не удается справиться с задачей. Подскажите, как правильно сделать:

                У меня есть блок .rs-seat-more, при нажатии на который у блока .rs-seat-right-block div должен изменяться CSS на: max-height: initial; и еще при нажатии на тот же блок у блока .rs-seat-wrap должен изменяться CSS на: max-height: initial;

                Я просто только начал изучать JavaScript, поэтому для меня это проблема.

                

                Ни в коем случае не слушайте тех, кто советует делать это через .css(). Это дурной тон, никогда не нужно менять слили непосредственно через js.
                Задавайте нужные стили классу-модификатору, и добавляйте/удаляйте его через .addClass() / .removeClass()

                

                

                Расул Гитинов:
                codepen.io/Serj-One/pen/YqWOyY
                Для простой визуализации использовал background, просто замените это свойство на нужное вам.

                

                Расул Гитинов: Кстати, поддержу Михаил Чирский, то, что вы пытаетесь сделать, выглядит довольно странно, и вероятно, есть более правильный метод реализации вашей задумки.

                

                

                Вы если сами не умеете, так не учите не правильно других, не дай бог конечно увидеть ваши плоды искусства на production

                

                Расул Гитинов: Вам же ответил Serj-One, что подобные вещи лучше решать стилями, а в скрипте просто управлять переключением классов, это 100 % лучше и правильнее, чем городить велосипеды с кучей ненужного кода. А если бы сказали, что вы хотите в результате, без ваших max-height и т д, возможно бы предложили и другое решение.

                P.S. сколько верстаю, ни разу не видел подобного извращенства с изменением max-height еще и на initial.
                Если все правильно сверстать, то простых Css-properties, более чем достаточно

                

                

                У меня по умолчанию срезается часть текста, которая не влезла, а при нажатии на кнопку «подробнее» раскрывается полностью.

                Everal: Мне ваш код не может не угодить, вы учитесь изначально не правильно не я, я поддержал товарища, который дал вам правильный совет, а поступайте как считаете нужным, это ваше право. Осуждать не буду, я сделал замечание, что я считаю, это не правильным, по крайней мере в наше время, и там где можно обойтись Css и минимум Js надо использовать все грамотно, ваша задача элементарна, ну вы пишите 3 строчки ненужного Js когда это может решить Css с помощью 1 модификатора.

                

                // элемент, на котором кликаем
                $(‘.rs-seat-more’).on(‘click’,
                function() <
                $(.rs-seat-right-block div’).css(‘max-height’, ‘initial’); // элемент, который изменяем
                >);

                ну и не забудьте обернуть это в init

                Источник

                Читайте также:  What is awt event in java