Статьи

jQuery динамически меняет CSS — это просто!

Ноябрь 2, 2018

change-css-with-jquery

Демонстрация функций CSS

Динамическое изменение стилей вашего веб-сайта — теперь повальное увлечение Интернетом! В этом коротком, но приятном посте я объясню, как делать простые, но эффективные трюки CSS с помощью jQuery . Это должно быть известно всем заядлым разработчикам jQuery!

Изменить определенный элемент CSS

Изменить CSS с помощью jQuery действительно легко, это формат функции .CSS (). 

$('jQuery selector').css({"css property name":"css property value"});

Вот несколько распространенных примеров: 

 //change paragraph text colour to green 
$('p').css({"color":"green"});

//float all divs with class .left
$('div.left').css('float');

//change all elements with class .bg-red to have a red background
$('.bg-red').css({"background-color":"red"});

Вложите ваши jQuery CSS команды

Полезно знать, что jQuery может одинаково интерпретировать CSS и DOM форматирование свойств из нескольких слов. Это не только сэкономит вам много времени, но и выглядит красивее! 

 newimg.css({'background-image': 'url('+newimgsrc+')'});
newimg.css({'position': 'absolute'});
newimg.css({'height': '70px'});
newimg.css({'width': '200px'});
newimg.css({'top': '68px'});
newimg.css({'right': '2px'});

Точно так же, как: 

 newimg.css({'background-image': 'url('+newimgsrc+')', 'position': 'absolute', 'height': '70px', 'width': '200px', 'top': '68px', 'right': '2px'});

Удалить стили CSS

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

1. Вы можете удалить класс, связанный со страницей или элементом 

 //remove text color from a div
$('#mydiv').removeClass('colors');

2. Вы также можете удалить стили CSS на определенных элементах напрямую 

 //remove text color from a div
$('#mydiv').css('color', '');

Это также отличный трюк jQuery CSS для удаления и добавления класса в одном вызове. 

 //change text color from red to green (classes specified in stylesheet)
$('#div').removeClass('red').addClass('green');

Расширение значений существующих стилей

Вы можете просто расширить стиль, основываясь на его текущем значении. Например, если padding-left элемента равняется 10px, то следующий код приведет к общему отступу слева в 25px. 

 .css( "padding-left", "+=15" )

Свойство функции jQuery .CSS ()

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

 $('div.example').css('width', function(index) {
  return index * 50;
});

Общие фоновые изменения CSS

Вот несколько примеров изменения фона CSS. 

 $('#myDiv').css('background-image', 'my_image.jpg');
// OR
$('#myDiv').css('background', 'path/to/image.jpg');
// OR
$('#myDiv').css("background-image", "url(/myimage.jpg)");  

<br /><br />
<h2>A Full Code Example - Set Div Background Image</h2>
This is a full example of jQuery Code to set a background image into a div dynamically when the page is loaded.

[code lang="js"]
<script type='text/javascript'>
$(document).ready(function() {
	//preload image (add timestamp to prevent cache)
	var newimgsrc = 'http://www.sitepoint.com/wp-content/uploads/jquery4u/2011/03/jquery-plugins2.jpg?' + (new Date().getTime());
	var newimg = $('#header');
    //replace the image
	$('#header').css("background-image", "url("+newimgsrc+")");
	newimg.css({'background-image': 'url('+newimgsrc+')', 'position': 'absolute', 'height': '70px', 'width': '200px', 'top': '68px', 'right': '2px'});
	newimg.show();
});
</script>

44
Share: