Получить, назначить CSS стиль через jQuery

Используя скрипты на jQuery вам придется столкнуться с возможностью изменения css стилей элементов или получения их текущих значений. Разберем на примерах методы реализаций данной задачи. Основной способ получения и задания css свойств в jQuery осуществляется за счет метода .css().

Пример: получить CSS стиль всех параграфов:
$(“p”).css(‘marginTop’); //здесь мы получаем все верхние отступы тегов p
$(“p”).css(‘background-color’); //здесь мы получаем все заливки тегов p

Как сделать условие css стиля
Пример: if($(“#reds”).css(‘marginLeft’) == ‘100px’) alert(‘fsd’); // если тег #reds имеет отступ слева 100px, то выводим сообщение
Пример: if(parseInt($(“#red”).css(‘marginLeft’)) > 200); //условие css стиля в виде целого числа

Как назначить CSS элементу
$(“.topBlock”).css(“top”, “5px”); установит смещение по вертикали равным 5px у всех элементов с классом topBlock
$(“.topBlock”).css({“top”:”5px”, “left”:”0″}); установит смещения по вертикали и горизонтали равными 5px и 0px у всех элементов с классом topBlock

Назначить несколько стилей элементу:
$(“div”).css({ border:”1px solid blue”, fontWeight:”bolder”, backgroundColor:”red”});

Таким образом, за счет .css() можно легко управлять стилями элементов. Но есть еще одна запись, которая помогает решать данную задачу достаточно хорошо. Это работа с атрибутами. Посмотрите пример:

$(‘.alltelo’).attr(‘style’,’height: 100px!important; margin-top:20px’);

Здесь к элементу .alltelo можно применить любые css. Важная особенность такой записи в том, что здесь очень простой синтаксис и можно использовать свойство !important, тогда как в .css() его нельзя поставить. Чаще всего я использую этот прием.