Этот сайт использует cookies. Продолжение работы с сайтом означает, что Вы согласны!
Изменение атрибутов 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);
Помощь сайту
ЮMoney (Yandex-деньги): 410011140483022
ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов