Как через jquery поменять свойство css
Перейти к содержимому

Как через jquery поменять свойство css

  • автор:

Как через jquery поменять свойство css

Для работы со стилями применяется метод 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);

Изменение CSS через JQuery

Подскажите пожалуйста, как изменить значение CSS свойства при помощи JQuery, или JS. Проблема в том, что стандартный .css() меняет стиль только заданного(ых) элемента(ов):

$('.painted').css('background-color', 'var(#d63031)'); // Меняет цвет на красный $('div').addClass('painted') // А потом добавляет блоку класс
div < width: 100px; height: 100px; >.painted < background-color: #00b894; /* Зелёный */ >

То есть в таком случае .css() не сработает, т. к. присваивание класса происходит после его изменения. Можно ли как-то поменять именно CSS код через JS/ JQuery?

Отслеживать
Pyramorphix
задан 26 мая 2020 в 19:35
Pyramorphix Pyramorphix
13 5 5 бронзовых знаков
«чтобы свойство изменилось именно в CSS файле» — ??
– user176262
26 мая 2020 в 19:36
Попытался описать проблему понятнее
26 мая 2020 в 19:46

вы не стиль как таковой для класса меняете описанный в css, а находите на странице элементы с данным классом и им изменяете стиль.

26 мая 2020 в 20:23
А можно как-то сделать так, чтобы менять именно стиль в css?
26 мая 2020 в 20:25

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

26 мая 2020 в 20:29

1 ответ 1

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

все смешалось в доме Облонских

вы в корне неверно трактуете происходящее. Насколько я понимаю, вы убеждены в том, что вот есть у вас класс .painted в css. Вы якобы берете его $(«.painted») и меняете его настройку. Потом будто бы добавляете этот измененный класс к диву.

На самом деле в указанном коде вы ищите на странице все элементы разметки у которых есть класс .painted (таковых в примере нет) и этим элементам изменяете css-свойство.

Отслеживать
ответ дан 26 мая 2020 в 20:27
29.3k 1 1 золотой знак 21 21 серебряный знак 43 43 бронзовых знака

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

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

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

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

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

jQuery метод .css()

jQuery метод .css() задает или возвращает одно или несколько свойств стиля для выбранных элементов.

Обращаю Ваше внимание, что, когда вы используете метод с целью вернуть заданное в CSS значение свойства, то возвращается значение первого совпадающего элемента. Некоторые универсальные свойства, такие как margin, padding, background, border могут возвращать разные результаты в зависимости от браузера пользователя. Рекомендуется получать такие значения отдельно для каждого свойства, например для ширины границы (доступно с версии jQuery 1.9):

$( selector ).css([ "borderTopWidth ", "borderRightWidth ", "borderBottomWidth ", "borderLeftWidth " ]) // возвращаем значения CSS свойств ширины границы для каждой стороны 

Кроме того, вычисляемый размер элемента всегда возвращается в пикселях, но он может быть указан как в em, ex, px, % и т.п. в таблице стилей. В зависимости от браузера значения цвета, может быть возвращено как в системе RGB, так и в шестнадцатиричной (HEX), независимо в какой системе указания цвета это задано в таблице стилей.

jQuery одинаково интерпретирует как CSS, так и DOM свойства. Например, следуюшая запись равнозначна и jQuery установит правильное значение в обоих случаях:

.css( "background-color": "#000", "border-left": "1px solid green" >) .css( "backgroundColor": "#000", "borderLeft": "1px solid green" >)

Когда число передается как значение, то jQuery преобразует его в строку и добавляет пиксели к концу этой строки. Если свойство требует единицы измерения, отличные от пикселей, то преобразует значение в строку и добавляет соответствующие единицы перед вызовом метода.

Если вы используете метод .css() для того, чтобы установить значение, то jQuery модифицирует значение глобального атрибута style элемента (ниже приведенные методы равноценны):

$( "#myElement" ).css( "color", "red" ) // с использованием библиотеки jQuery document.getElementById( "#myElement" ).style.color nam">red" // на нативном JavaScript 

Установка значения атрибута style в пустую строку удаляет свойство из элемента, если оно до этого уже было применено:

$( "#myElement" ).css( "color", "" )

Обратите внимание на важный момент, что пустая строка не удалит стиль, который был применен с использованием внешней, или внутренней таблицы стилей.

Обращаю Ваше внимание, что при использовании метода .css(), jQuery игнорирует директиву !important , которая отменяет значимость последнего определенного стиля. Если Вам необходимо сделать какой-то стиль приоритетным, то Вы можете определить это в таблице стилей, и, например, добавить этот класс элементу с помощью метода .addClass().

С версии jQuery 1.4 метод .css() позволяет задать функцию, которая возвращает новое значение для свойства CSS. Если функция ничего не возвращает, или undefined, то в этом случае текущее значение не изменяется. Это может быть полезным для выборочной установки значений только при соблюдении определенных критериев.

$( selector ).сss( "height", function( index )  return index * 5; // высота элемента увеличивается в зависимости от индекса >);

С версии jQuery 1.6 метод .css() принимает относительные значения, начинающиеся с += или -= , чтобы увеличить или уменьшить текущее значение.

$( selector ).сss( "margin-left", "+=40" ) // увеличит внешний отступ элемента на 40 пикселей (прибавит к текущему значению 40) 

С версии jQuery 1.8 метод .css() автоматически проставляет префиксы производителей (-webkit, -moz, -ms и тому подобное).

jQuery синтаксис:

/* Возвращаем (return properties) */ Синтаксис 1.0: $( selector ).сss( propertyName ) // возвращаем значение CSS свойства (в виде строки) propertyName - String Синтаксис 1.9: $(selector).сss( [propertyNames] ) // возвращаем значения CSS свойств (в виде строки) propertyNames - Array // перечисление свойств в массиве через запятую /* Задаем (set properties) */ Синтаксис 1.0: $( selector ).сss( propertyName, value ) // устанавливаем значение CSS свойства $( selector ).сss(  // устанавливаем значения CSS свойств (передаем в объекте) propertyName: value, propertyName: value, propertyName: value > ) propertyName - String value - String, или Number Синтаксис 1.4: $( selector ).сss( propertyName, function( index, value) ) // устанавливаем новое значение CSS свойства с использованием функции propertyName - String function - Function index - Integer value - String 

Добавлен в версии jQuery

1.0 (синтаксис расширен в версиях 1.4 и 1.9, с 1.8 добавлен автопрефиксер)

Значения параметров

  • index — возвращает индекс позиции элемента в наборе (среди выбранных элементов).
  • value — возвращает текущее значение свойства CSS.

Пример использования

   Возвращение значений свойств с помощью метода .css() 
p border: 1px solid #000; /* сплошная граница черного цвета размером 1 пиксель */ >
$( document ).ready(function() $("button").click(function() // задаем функцию при нажатиии на элемент console.log($( "p" ).css( 'color' )); // возвращаем значение одного свойства первого совпавшего элемента console.log($( "p" ).css( ["borderTop", "borderRight", "borderBottom", "borderLeft" ] )); // возвращаем несколько значений свойств первого совпавшего элемента >); >); Клик style =
"color:red">Раз style = "color:green">Два style = "color:blue">Три

В этом примере с использованием jQuery метода .css() мы в первом случае возвращаем значение одного свойства и выводим информацию в консоль браузера (обратите внимание, что информация у браузера Chrome выводится в системе RGB), а во втором случае возвращаем значения в виде объекта сразу четырех свойств. Обратите внимание, что в jQuery можно использовать как значения CSS свойств, например, border-top, так и DOM свойств borderTop.

Результат нашего примера:

Пример возвращения значений свойств с помощью метода .css()

Рассмотрим пример в котором с помощью метода .css() установим для элементов различные CSS свойства:

   Установка значений свойств методом .css()  $( document ).ready(function() $( "button" ).click(function() // задаем функцию при нажатиии на элемент $( "p:first" ).css( "color", "red" ); // устанавливаем значение одного свойства первого элемента 

в документе $( "p:last" ).css("color": "green", // устанавливаем значение трех свойств последнего элемента

в документе "border": "1px solid orange", "font-weight": "bold">); >); >); Клик Раз Два Три

В этом примере с использованием jQuery метода .css() мы в первом случае с использованием селектора :first устанавливаем значение одного свойства первому элементу в документе, а во втором случае с использованием метода .css() и селектора :last устанавливаем несколько свойств и значений последнему элементу . Обратите внимание, что синтаксис при установки нескольких свойств отличается.

Результат нашего примера:

Пример установки значений свойств методом .css()

Рассмотрим пример в котором в качестве значения параметра метода .css() передадим функцию:

   Использование функции в качестве значения параметра метода .css() 
div width: 100px; /* ширина элемента */ height: 100px; /* высота элемента */ background: yellow; /* цвет заднего фона */ >
$( document ).ready(function() $( "button" ).click(function() // задаем функцию при нажатиии на элемент $( "div" ).css( "width", function( index, value ) return parseFloat( value ) * 1.1;> ); // с помощью функции parseFloat преобразуем строку в число (старое значение) * 1.1>); >); >); Клик

В этом примере с использованием jQuery метода .css() и функции, переданной в качестве значения параметра мы изменяем при каждом нажатии на кнопку ширину элемента. Обратите внимание, что в примере была использована JavaScript функция parseFloat(), которая принимает строку в качестве аргумента и возвращает десятичное число.

Результат нашего примера:

Пример использования функции в качестве значения параметра метода .css()

jQuery DOM методы

© 2016-2024 Денис Большаков, замечания и предложения по работе сайта Вы можете направить по адресу basicweb.ru@gmail.com

Кажется, вы используете блокировщик рекламы 🙁

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

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.

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 и т.д.

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

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