Изменение атрибутов CSS

Для изменения атрибутов стилей предназначены следующие методы:

• css() — позволяет получить или установить значение отдельных атрибутов CSS. Метод имеет несколько форматов:

css(<Название атрибута>)
css(<Массив с названиями атрибутов>)
css(<Название атрибута>, <Значение>)
css(<Объект с атрибутами и значениями>)
css(<Название атрибута>, <Функция обратного вызова>)

Первый формат метода позволяет получить значение указанного атрибута для первого элемента коллекции. Значение возвращается в виде строки.

Составное название атрибута может быть таким, как принято в CSS (например, background-color) или в JavaScript (например, backgroundColor). В качестве примера выведем цвет фона первого элемента DIV:

<div id="div1" style="background-color:red">Текст</div>
<div id="div2" style="background-color:blue">Текст</div>

console.log( $('div').css('background-color') );

Результат выполнения этого примера зависит от браузера. Так браузер Firefox вернет значение rgb(255, 0, 0), а не название цвета. В случае если цвет фона элемента не задан, то мы получим значение transparent.

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

console.log( $('div').css(['background-color',
                           'width', 'height']) );

Примерный результат в Web-браузере Firefox:

Object { background-color: "rgb(255, 0, 0)",
         width: "1230px", height: "24px" }

Третий формат метода css() позволяет задать значение указанного атрибута для всех элементов коллекции. Сделаем цвет фона всех абзацев красным:

$('p').css('background-color', '#ff0000');

Результат в исходном HTML-коде:

<p style="background-color: rgb(255, 0, 0);">Абзац 1</p>

Метод возвращает ссылку на коллекцию jQuery. По этой причине мы можем изменить еще несколько атрибутов, составив цепочку вызовов метода css(). Сделаем цвет фона всех абзацев красным, а цвет текста — белым:

$('p').css('backgroundColor', 'red').css('color', '#ffffff');

Если в качестве значения указано число, то к нему будет автоматически добавлена единица изменения px. Зададим ширину всех абзацев равной 300 пикселов:

$('p').css('width', 300);

Результат в исходном HTML-коде:

<p style="width: 300px;">Абзац 1</p>

Можно также определять значения атрибута относительно его текущего значения, указав перед значением += или –=. Уменьшим ширину всех абзацев на 300 пикселов, а высоту увеличим на 100 пикселов:

$('p').css('width', '-=300px').css('height', '+=100px');

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

{
   Атрибут1: 'Значение1',
   Атрибут2: 'Значение2',
   ...
   АтрибутN: 'ЗначениеN'
}

Если название атрибута содержит дефис, то название необходимо заключить в кавычки или апострофы. Для примера сделаем цвет фона всех заголовков первого уровня черным, цвет текста — белым, а также зададим размер и название шрифта:

$('h1').css({
   backgroundColor : '#000000',
   color           : '#ffffff',
   'font-size'     : '18pt',
   'font-family'   : 'Tahoma'
});

Такой объект можно сохранить в переменной, а затем передать его в качестве параметра метода css():

var obj = { fontSize: '18pt', fontFamily: 'Tahoma' }
$('h1').css(obj);

Пятый формат метода css() позволяет выборочно задать значение указанного атрибута, в зависимости от каких-либо условий. В параметре <Функция обратного вызова> указывается ссылка на функцию следующего формата:

function <Название функции>([<Индекс>[, <Значение>]]) {
   // ...
}

Текущий элемент доступен внутри функции через указатель this. Обратите внимание: указатель this ссылается на текущий элемент объектной модели документа, а не на элемент коллекции jQuery. Текущий индекс элемента в коллекции доступен через параметр <Индекс>, а старое значение атрибута — через параметр <Значение>. Чтобы задать значение атрибута, необходимо внутри функции обратного вызова вернуть новое значение в виде строки или числа (значение в пикселах). Если функция ничего не возвращает или возвращает значение undefined, то значение атрибута не меняется. В качестве примера сделаем так, чтобы все ссылки, имеющие абсолютный URL-адрес, были выделены красным цветом:

$('a').css('color', function() {
   var pattern = /^(http|https):\/\//i;
   if ( pattern.test(this.href) ) {
      return 'red';
   }
});

Уменьшим ширину всех абзацев на 300 пикселов:

$('p').css('width', function(i, v) {
   return parseFloat(v) - 300;
});

Функцию обратного вызова можно указать в качестве значения свойства при передаче объекта в метод css(). Уменьшим ширину всех абзацев на 300 пикселов, а высоту увеличим на 100 пикселов:

$('p').css({
   width: function(i, v) {
      return parseFloat(v) - 300;
   },
   height: function(i, v) {
      return parseFloat(v) + 100;
   }
});

• width() и height() — позволяют получить ширину и высоту первого элемента коллекции соответственно. Возвращают значение в виде числа. Для примера выведем ширину и высоту доступной области окна браузера:

var width = $(window).width();
var height = $(window).height();
console.log('Ширина: ' + width + ' высота: ' + height);

В результате будет выведено, например, следующее:

Ширина: 1920 высота: 641

В качестве еще одного примера выведем ширину и высоту элемента с помощью методов width() и height(), а для сравнения выведем также значения соответствующих атрибутов стиля:

<div id="div1" 
     style="width: 300px; height: 200px; border: dotted;">
</div>
<div id="log"></div>

var elem = $('#div1');
$('#log').append('<b>Значения методов:</b><br>')
         .append('Ширина: ' + elem.width() + '<br>')
         .append('Высота: ' + elem.height() + '<br>')
         .append('<b>Значения атрибутов стиля:</b><br>')
         .append('Ширина: ' + elem.css('width') + '<br>')
         .append('Высота: ' + elem.css('height') + '<br>');

В результате будет выведено следующее (атрибут box-sizing имеет значение border-box):

Значения методов:
Ширина: 294
Высота: 194
Значения атрибутов стиля:
Ширина: 300px
Высота: 200px

Как видно из примера, значения атрибутов стиля содержат единицы измерения, тогда как методы возвращают значение в виде числа. Кроме того, методы возвращают реальную ширину или высоту содержимого элемента, вне зависимости от значения атрибута box-sizing. В библиотеке Bootstrap для всех элементов значение атрибута box-sizing устанавливается равным border-box, поэтому размеры задаются для самого контейнера с учетом его внутренних отступов и рамки (без учета внешних отступов). Поэтому мы получили разные значения. Обычно в CSS по умолчанию используется значение content-box, которое не учитывает внутренние отступы и рамку;

• width(<Значение>) и height(<Значение>) — позволяют задать ширину и высоту всех элементов коллекции соответственно. Возвращают объект jQuery. Зададим ширину всех элементов DIV, а затем укажем цвет фона:

<div></div>

$('div').width(50).height(10)
        .css('background-color', '#ff0000');

Результат:

<div style="width: 50px; height: 10px;
            background-color: rgb(255, 0, 0);"></div>

Значением параметра может быть не только число, но и строка:

<div id="div1"></div>
<div id="div2"></div>

$('#div1').width('500px').height('100px');
$('#div2').width('90%').height('100px');

Результат:

<div id="div1" style="width: 500px; height: 100px;"></div>
<div id="div2" style="width: 90%; height: 100px;"></div>

В качестве параметра можно указать ссылку на функцию следующего формата:

function <Название функции>([<Индекс>[, <Значение>]]) {
   // ...
}

Текущий элемент доступен внутри функции через указатель this. Обратите внимание: указатель this ссылается на текущий элемент объектной модели документа, а не на элемент коллекции jQuery. Текущий индекс элемента в коллекции доступен через параметр <Индекс>, а старое значение в виде числа — через параметр <Значение>. Чтобы задать значение, необходимо внутри функции обратного вызова вернуть новое значение в виде строки или числа (значение в пикселах). Уменьшим ширину всех абзацев на 300 пикселов, а высоту увеличим на 100 пикселов:

$('p').width( function(i, v) {
   return v - 300;
}).height( function(i, v) {
   return v + 100;
});

• innerWidth() и innerHeight() — возвращают соответственно ширину и высоту первого элемента коллекции. Методы учитывают значение атрибута padding, но не учитывают толщину линии рамки. Если методы применяются к пустой коллекции, то возвращается значение undefined. Пример:

<div id="div1" class="p-2 border">Текст</div>

var width = $('#div1').innerWidth();
var height = $('#div1').innerHeight();
console.log('Ширина: ' + width + ' высота: ' + height);

• innerWidth(<Значение>) и innerHeight(<Значение>) — позволяют задать ширину и высоту всех элементов коллекции соответственно. Методы учитывают значение атрибута padding, но не учитывают толщину линии рамки. В качестве параметра можно указать строку или число (значение в пикселах). Пример:

<div id="div1" class="p-2 border">Текст</div>

$('#div1').innerWidth(300).innerHeight('100px');

Результат при использовании библиотеки Bootstrap (атрибут box-sizing имеет значение border-box):

<div id="div1" class="p-2 border" style="width: 302px; 
height: 102px;">Текст</div>

В качестве параметра можно указать ссылку на функцию следующего формата:

function <Название функции>([<Индекс>[, <Значение>]]) {
   // ...
}

Текущий элемент доступен внутри функции через указатель this. Обратите внимание: указатель this ссылается на текущий элемент объектной модели документа, а не на элемент коллекции jQuery. Текущий индекс элемента в коллекции доступен через параметр <Индекс>, а старое значение в виде числа — через параметр <Значение>. Чтобы задать значение, необходимо внутри функции обратного вызова вернуть новое значение в виде строки или числа (значение в пикселах). Уменьшим ширину всех абзацев на 300 пикселов, а высоту увеличим на 100 пикселов:

$('p').innerWidth( function(i, v) {
   return v - 300;
}).innerHeight( function(i, v) {
   return v + 100;
});

• outerWidth([true]) и outerHeight([true]) — возвращают соответственно ширину и высоту первого элемента коллекции. Методы учитывают значение атрибута padding и толщину линии рамки. Если в качестве параметра указать значение true, то методы будут также учитывать значение атрибута margin. Пример:

<div id="div1" class="p-2 m-2 border">Текст</div>

var width = $('#div1').outerWidth();
var height = $('#div1').outerHeight();
console.log('Ширина: ' + width + ' высота: ' + height);
width = $('#div1').outerWidth(true);
height = $('#div1').outerHeight(true);
console.log('Ширина: ' + width + ' высота: ' + height);

Примерный результат при использовании библиотеки Bootstrap (атрибут box-sizing имеет значение border-box):

Ширина: 1214 высота: 42
Ширина: 1230 высота: 58

• outerWidth(<Значение>[, true]) и outerHeight(<Значение>[, true]) — позволяют задать ширину и высоту всех элементов коллекции соответственно. Методы учитывают значение атрибута padding и толщину линии рамки. Если в качестве второго параметра указать значение true, то методы будут также учитывать значение атрибута margin. Пример:

<div id="div1" class="p-2 m-2 border">Текст</div>

$('#div1').outerWidth(300, true).outerHeight('100px', true);

Результат при использовании библиотеки Bootstrap (атрибут box-sizing имеет значение border-box):

<div id="div1" class="p-2 m-2 border" style="width: 284px; 
height: 84px;">Текст</div>

В качестве параметра можно указать ссылку на функцию следующего формата:

function <Название функции>([<Индекс>[, <Значение>]]) {
   // ...
}

Текущий элемент доступен внутри функции через указатель this. Обратите внимание: указатель this ссылается на текущий элемент объектной модели документа, а не на элемент коллекции jQuery. Текущий индекс элемента в коллекции доступен через параметр <Индекс>, а старое значение в виде числа — через параметр <Значение>. Чтобы задать значение, необходимо внутри функции обратного вызова вернуть новое значение в виде строки или числа (значение в пикселах). Уменьшим ширину всех абзацев на 300 пикселов, а высоту увеличим на 100 пикселов:

$('p').outerWidth( function(i, v) {
   return v - 300;
}).outerHeight( function(i, v) {
   return v + 100;
});

Рассмотрим возможность изменения ширины и высоты элемента путем задания произвольных числовых значений, которые можно вводить в текстовые поля (листинг 1.6).

Листинг 1.6. Методы width() и height()

<!doctype html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <meta name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <title>Методы width() и height()</title>
</head>
<body>
   <div class="container my-3">
      <div id="div1" class="p-3 m-3 border bg-light"></div>
      <p>Текущие значения:</p>
      <div id="log"></div>
      <div class="form-group mt-3">
         <label for="txtWidth">Ширина:</label>
         <input type="text" class="form-control"
                id="txtWidth" placeholder="Введите ширину">
         <div class="invalid-feedback">
           Необходимо ввести число!
         </div>
      </div>
      <div class="form-group">
         <label for="txtHeight">Высота:</label>
         <input type="text" class="form-control"
                id="txtHeight" placeholder="Введите высоту">
         <div class="invalid-feedback">
           Необходимо ввести число!
         </div>
      </div>
      <button type="button" class="btn btn-primary" id="btn">
         Задать новые значения</button>
   </div>
<script src="js/jquery.min.js"></script>
<script>
function showValue() {
   var elem = $('#div1');
   var msg = 'Высота: ' + elem.height() + '<br>inner: Ширина: ';
   msg    += elem.innerWidth() + ' Высота: ' + elem.innerHeight();
   msg    += '<br>outer: Ширина: ' + elem.outerWidth(true);
   msg    += ' Высота: ' + elem.outerHeight(true);
   $('#log')
      .html('Ширина: ' + elem.width() + ' ')
      .append(msg);
}
$(function() {
   $('#txtWidth, #txtHeight').focus( function() {
      $(this).removeClass('is-invalid');
   });
   $('#btn').click( function() {
      var w = $('#txtWidth').val();
      var h = $('#txtHeight').val();
      var elem = $('#div1');
      if (w !== '') {
         w = parseInt(w);
         if ( !isNaN(w) ) {
            elem.width(w);
            $('#txtWidth').val('');
         }
         else $('#txtWidth').addClass('is-invalid');
      }
      if (h !== '') {
         h = parseInt(h);
         if ( !isNaN(h) ) {
            elem.height(h);
            $('#txtHeight').val('');
         }
         else $('#txtHeight').addClass('is-invalid');
      }
      showValue();
   });
   showValue();
});
</script>
</body>
</html>

Если ввести значение и щелкнуть на кнопке Задать новые значения, будет вызван обработчик события onclick. С помощью метода val() мы получаем значения, введенные в текстовые поля, и сохраняем их в переменных. Далее проверяем значения на пустоту. Если поле не пустое, то пытаемся преобразовать строку в число. Прежде чем присвоить новое значение, проверяем, не вернул ли метод parseInt() значение NaN, с помощью метода isNaN(). Далее задаем новое значение и очищаем поле ввода. Если в поле была введена строка, а не число, то к полю добавляем стилевой класс is-invalid. Затем обновляем данные в элементе с идентификатором log при помощи функции showValue(). Обратите внимание на следующие строки:

$('#log')
   .html('Ширина: ' + elem.width() + ' ')
   .append(msg);

Здесь мы вначале получаем элемент, а затем выводим ширину с помощью метода html(). После изменения содержимого элемента метод html() возвращает ссылку на полученный ранее элемент. По этой причине можно производить с ним дальнейшие манипуляции. В данном случае мы добавили в конец элемента значения других атрибутов. Создание таких цепочек вызовов — характерная особенность библиотеки jQuery. Практически все методы возвращают объект jQuery, если, конечно, не возвращают какого-либо другого значения. Так, например, метод width() без указания параметра возвращает значение в виде числа, а при указании параметра — объект jQuery.

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

$('#log')
   // Выводим ширину элемента
   .html('Ширина: ' + elem.width() + ' ')
   // Выводим остальные значения
   .append(msg);

Учебник по jQuery и AJAX в формате PDF