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

Александр Мальцев
Александр Мальцев
93K
17
Содержание:
  1. Как получить стиль элемента в jQuery
  2. Как изменить или добавить стиль к элементу в jQuery
  3. Как удалить определённый стиль у элемента
  4. Комментарии

Статья, в которой разберем, как в jQuery осуществляется работа со стилями (style) элемента.

jQuery - Работа со стилями элемента

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

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

Первый вариант метода css - это получение окончательного значения 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 выведим его ширину и высоту:

<div style="width: 100px; height: 100px; background-color: bisque;"></div>
<div style="width: 200px; height: 200px; background-color: lightseagreen;"></div>
...
<script>
  // при нажатии на элемент div
  $('div').click(function () {
    // создадим переменную, которая будет содержать результат
    var output = [];
    // получим значения сразу нескольких CSS свойств
    var cssProperties = $(this).css(['width', 'height']);
    // переберём полученные свойства
    $.each(cssProperties, function (prop, value) {
      // добавим в массив элемент, содержащий имя свойства и значения
      output.push(prop + ": " + value);
    });
    //выведем массив в качестве содержимого элемента
    $(this).html(output.join('<br>'));
  });
</script>

Как изменить или добавить стиль к элементу в 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):

<div class="info">...</div>
<div class="info">...</div>

<script>
$('.info').css('background', 'grey');
</script>

Если необходимо применить к каждому элементу текущего набора сразу несколько 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:

$('#content img').css('width','300px');

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

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

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

$('img').css('height','');

Комментарии: 17

  1. Anvar
    Anvar
    2020-07-15 15:54:49
    А как при нажатии на кнопку увеличивать ширину? При каждом нажатии чтобы добавлялось несколько процентов
  1. Александр Мальцев
    Александр Мальцев
    2020-07-20 15:25:47
    Вам нужно получить текущую ширину кнопки, преобразовать её в число и умножить на необходимый коэффициент (например, на 1.1). После этого установить полученное значение элементу.
    Например:
    $('button').click(function(){
      $(this).css('width', parseInt($(this).css('width'))*1.1);
    });
  • Sagum
    Sagum
    2020-05-09 18:08:45
    Здраствуйте!

    подскажите пожалуйста, как можно переписать
    $('.classА#'+id+' .classB').css({'background-position' :'Х1 X2'}); в стандарте ЕS6? (Если причина в этом.),
    так как в таком ввиде .css({'background-position' :'Х1 Х2'}) не меняется.
    Смысл всего етого в том, что бы при нажатии на елемент списка менялся {'background-position' :'Х1 Х2'} только у этого елемента

    Зарание спасибо!
    1. Александр Мальцев
      Александр Мальцев
      2020-05-11 15:23:19
      Здравствуйте!
      Для этого вам нужно создать обработчик события. Например:
      <ul id="list">
        <li></li>
        <li></li>
      </ul>
      
      <script>
      $('#list li').click(function(){
        $(this).css({'background-position' :'50% 50%'});
      })
      </script>
      
    2. Sagum
      Sagum
      2020-05-11 21:49:16
      Большое спасибо за ответ.
      Я попробую на выходных и о пишусь…
    3. Sagum
      Sagum
      2020-05-17 13:45:09
      Здравствуйте!
      К сожалению не получилось.
      Может быть я не корректно описал проблемму, попробую еще раз:
      Я пытаюсь написать mediaplayer, который состоит из самого player и списка песен.
      Pядом с названием песни стоит значек play pause, который должен переключатся при клике на песню, причем только у данной песни.
      Уменя иммется массив: songs = [
      track_one=[0, 'Name-Song_1) ', song1.mp3', '231.026'],

      track_twelve=[19, 'Name-Song_12 ', 'song12.mp3', '172.617143'],
      ];
      список песен выводистся в виде в циклa:

      for(i=0; i< songs.length; i++){
      $('.player-wrap').append(
      '

      '+songs[i][1]+'

      '+parseInt(songs[i][3]/60)+':'+parseInt(songs[i][3]%60)+'
      ');
      }

      И вот когда проиходит клик на новую песню
      $('.song, .play-pause').on('click', function() {
      let id = $(this).attr('id');
      $('.song#'+id+' .play-pause__song').css({'background-position' :'-12px 2px'}); // плай и пауза это одна картинка
      //"… здесь выполнается функция запуска новой песни."
      });
      play, pause не меняются у выбранной песни, но если в этой части $('.song#'+id+' .play-pause__song') убрать '.song#'+id+' и оставить только ' .play-pause__song', то все работает только смена плай на пауза проиходит у всех песен одновременно.
      .play-pause__song — это класс у картинки с play, pause
      Зарание спасибо
    4. Александр Мальцев
      Александр Мальцев
      2020-05-27 13:11:05
      Здравствуйте! Если нужно более конкретно, то лучше предоставить ваше текущее рабочее решение на JS Bin или в какой-то другой песочнице. Так можно будет подсказать более конкретно именного для вашего случая.
  • Vladimir
    Vladimir
    2018-10-24 13:20:59
    Доброго дня всем читателям!
    Подскажите, как решить задачу, а именно.
    Есть группа кнопок, необходимо задать активное состояние нажатой кнопки, без потери фокуса, если нажать на любом месте экрана. Активность кнопки снимается только в том случае, если будет нажата другая кнопка из этой группы/
    Заранее спасибо за любой ответ
    Есть кнопка
    CW
    и есть описанный её класс, часть класса используется из бутстрапа (btn)
    .btn-mods
    .btn-mods:hover
    .btn-mods:focus
    .btn-mods:hover:after

    1. Александр Мальцев
      Александр Мальцев
      2018-10-27 14:15:58
      Здравствуйте!
      Пример решения этой задачи:
      <!-- Кнопки -->
      <button class="btn btn-primary btn-focus">Кнопка 1</button>
      <button class="btn btn-primary btn-focus">Кнопка 2</button>
      <button class="btn btn-primary btn-focus">Кнопка 3</button>
      
      <!-- JavaScript код -->
      <script>
        var btn = $('.btn-focus').eq(0);
        btn.focus();
        btn.addClass('focus');
      
        $(document).on('focus click', function (e) {
          var currentBtn = $(e.target);
          if (currentBtn.hasClass('btn-focus') && (currentBtn !== btn)) {
            currentBtn.focus();
            currentBtn.addClass('focus');
            btn.removeClass('focus');
            btn = currentBtn;
            return;
          }
          btn.focus();
        })
      </script>
      
      Класс btn-focus определяет принадлежность кнопки к группе, для которой это необходимо выполнять.
      Демо этого примера доступно по этой ссылке.
    2. Vladimir
      Vladimir
      2018-10-27 14:28:09
      Спасибо! Буду пробовать!
  • Alex
    Alex
    2017-11-02 10:13:57
    Здравствуйте, подскажите пожалуйста, как можно покрасить буквы из параграфа, задавая значение в инпут и нажимая кнопку буттон. На пример если в инпут пишем Red и Green, тогда в ответе должно получиться Green через одной буквы. А если задаем 3 цвета тогда абсолютно все буквы должны иметь разные цвета, тоесть рандом и чтобы 2 буквы рядом не имели тот же цвет? И чтобы инпут мог определить на пример: #FFFFFF, rgb и rgba.

    Огромное спасибо!
    1. Александр Мальцев
      Александр Мальцев
      2017-11-03 17:26:26
      Здравствуйте!
      Чтобы это осуществить вам необходимо каждую букву в параграфе обернуть в тег, например, span. После этого вы можете к ним можете добавить inline стили или установить их с помощью CSS.
      Например, изменить цвет чётных букв в параграфе на указанный цвет:
      <input type="text" id="colorText">
      <button type="button" id="changeColorText">Изменить цвет букв</button>
      <p id="text">Какой текст...</p>
      
      <script src="jquery.js"></script><!-- Подключаем jQuery -->
      <script>
      $(function(){
          $('#changeColorText').click(function(){
              var text = $('#text').text(),
                    result = '',
                    j = 0;
              for (var i=0; i<text.length; i++) {
                  if (text[i] === ' ') {
                      result += text[i];
                  } else {
                      if (j % 2 === 0) {
                          result += '<span style="color:'+ $('#colorText').val() +'">' + text[i] + '</span>';
                      } else {
                          result += '<span>' + text[i] + '</span>';
      		}
                      j++;
                  }
              }
              $('#text').html(result);  
          });
      });
      </script>
      
  • Андрей
    Андрей
    2017-08-29 15:55:03
    Огромнейшее спасибо!!!
    Ещё вопрос: #profiles- это левая часть модального окна. И при уменьшении размеров, картинка выходит за его рамки.
    1. Александр Мальцев
      Александр Мальцев
      2017-08-30 11:36:03
      Когда картинка используется в качестве фона, необходимо сделать адаптивным именно сам блок. Но это не так просто. Тут либо использовать элемент img, либо использовать трюк CSS и задавать высоту блока относительно высоты с помощью %. В этом случае вы должны вычислить пропорции изображения в %: высота / ширину * 100%.
      После этого данное значение использовать так:
      <div id="profiles" style="height: 0; padding-bottom: 56.25%; display: block;"></div>
      Например, для картинки 16x9 (9/16*100 = 56,25%).

    2. Андрей
      Андрей
      2017-08-30 19:54:06
      Огомнейшее спасибо. От всей души. Все понятно и доступно.
  • Андрей
    Андрей
    2017-08-29 10:21:49
    Вопрос. Есть такой код:
    $(function (){ 
    					$('.rich_e').click(function(){
    						 var html = $('#rich_e').text();						 
    						 $("#tittles").html(html);
    						 $('#profiles').css('backgroundImage', 'url("../newNeoOkna/img/profils/Richmond/reachmont_eco.jpg")');
    						 $('#profiles').css('backgroundRepeat', 'no-repeat');
    						 $('#profiles').css('max-width', '100%');
    						 $('#profiles').css('height', 'auto');
    						 $('#profiles').css('display', 'block');
    Как сделать картинку адаптивной. Я знаю, что у меня в коде ошибка. Но как сделать, не знаю.
    1. Александр Мальцев
      Александр Мальцев
      2017-08-29 11:23:00
      Если вы устанавливаете изображение в качестве background, то её адаптивность осуществляется с помощью CSS свойства background-size. В качестве значений обычно используют contain или cover.
      HTML-разметка:
      <div id="profiles" style="min-height: 200px;"></div>
      
      JavaScript:
      $(function (){ 
          $('.rich_e').click(function(){
              var html = $('#rich_e').text();						 
      	$("#tittles").html(html);
              $('#profiles').css('background-image', 'url("../newNeoOkna/img/profils/Richmond/reachmont_eco.jpg")');
              $('#profiles').css('background-repeat', 'no-repeat');
              $('#profiles').css('background-size','contain');