Jquery как изменить стиль элемента
Перейти к содержимому

Jquery как изменить стиль элемента

  • автор:

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. Кликая по блокам, чтобы унать из цвет:

HTML:

JS:

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

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

HTML:

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

JS:

$("p").click(function () < $(this).css(); >);

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

HTML:

Параграф 1






 
Параграф 2
 
Параграф 3






 
Параграф 4

JS:

$("p").click(function () < $(this).css('fontSize', function(index, value)< var newSize = value.replace('px','')*2; return newSize; >); >);

Шпаргалка 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()

                  jQuery — Урок 4. Методы для работы с CSS-стилями

                  В jQuery имеется три категории методов: одни манипулируют с элементами, подходящими по шаблону; вторые возвращают значения элемента, а третьи изменяют сами элементы.

                  Сегодня рассмотрим методы, которые используются для CSS-стилей.

                  Итак, чтобы добавить какому-либо элементу стиль, необходимо воспользоваться следующим методом:

                  .css(name,value)

                  $(«div»).css(«border», «1px solid blue»);

                  Данная инструкция обведет div синей рамкой.

                  В качестве параметров здесь используются названия и значения, применимые в CSS: background, border, font-style, color и т.д.

                  Если необходимо задать для элемента несколько CSS-правил, то лучше использовать следующую конструкцию:

                  Данная инструкция обведет div синей рамкой, сделает фон красным, а текст — жирным.

                  Обратите внимание, что для сложносоставных свойств CSS вроде font-weight и background-color используются иэ эквиваленты из JS: fontWeight, backgroundColor и т.д.

                  Jquery как изменить стиль элемента

                  Для работы со стилями применяется метод css() . Чтобы получить значение нужного свойства, мы передаем в этот метод в качестве параметра название свойства:

                  console.log($('body').css('font-size'));

                  Изменение стиля

                  Чтобы изменить стиль, во-первых, мы можем передать в метод css в качестве второго параметра новое значение свойства:

                  $('a').css('font-weight', 'bold');

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

                  $('a').css('color', function(index, oldValue) < if(oldValue=='rgb(0, 0, 238)') else >);

                  В зависимости от того, какое было старое значение oldValue элемента для данного свойства, функция возвращает новое значение для каждого элемента выборки.

                  В-третьих, мы можем передать массив свойств для установки:

                  $('a').css();

                  Здесь в качестве параметра мы передаем объект javascript, в котором устанавливаем для нужных свойств новые значения.

                  Иногда необходимо увеличить или уменьшать свойства относительно текущего значения на определенное количество. В этом случае мы можем написать так:

                  $('a').css();

                  Установка ширины и высоты

                  Несмотря на то, что мы можем манипулировать свойствами width и height через метод css, мы можем также использовать одноименные методы width() и height() :

                  var div = $('div').first(); var newWidth=div.width()+150; div.width(newWidth); var newHeight = div.height()+50; div.height(newHeight);

                  как изменить стиль соседнего li при клике jquery?

                  Добавьте css. У блока added-show изначально стиль display: none ? И желательно несколько кнопок, чтобы было видно структуры родителей.

                  3 фев 2020 в 22:30
                  добавил это колонка с одним товаром, другие такие же
                  3 фев 2020 в 22:40

                  1 ответ 1

                  Сортировка: Сброс на вариант по умолчанию

                   $(".add-to-cart").click(function () < let z = $(this).parent(); // Так как находится в li - получаем родителя let next = z.next(); // берём следующий элемент от полученного родителя next.css('display', 'block'); //отображаем >);

                  Если нужно, чтобы при повторном нажатии снова пропадала надпись «Добавлено» используйте toggle
                  Пример:

                   $(".add-to-cart").click(function () < let z = $(this).parent(); let next = z.next(); next.toggle('added-show'); >);
                   .added-show

                  Отслеживать
                  ответ дан 3 фев 2020 в 22:45
                  Denis640Kb Denis640Kb
                  14k 5 5 золотых знаков 21 21 серебряный знак 46 46 бронзовых знаков

                  • javascript
                  • jquery
                    Важное на Мете
                  Похожие

                  Подписаться на ленту

                  Лента вопроса

                  Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

                  Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.10.27.43697

                  Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

                  Похожие публикации:
                  1. Как обновить openssl windows
                  2. Как обновить ubuntu с флешки
                  3. Метаюмор что это
                  4. Сколько правил содержат простые экспертные системы

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *