jQuery CSS. Управление стилями.

Опубликовано 2012.08.12

Библиотека jQuery позволяет свободно управлять css свойствами элементов DOM дерева. Если вы уже знакомы с основами синтаксиса jQuery - то разобраться со стилями для вас не составит никакого труда. Задать свойство можно так:

$(element).css('color','green');

Вот и всё, теперь у элемента есть свойство color, которое равно green. Например имеем разметку:

<p id="abzac">
Подкрасить в красный цвет яваскриптом.
</p>

Код на jQuery будет выглядеть следующим образом:

$("#abzac").css('color','red');

Нужно скрыть элемент - не вопрос,добавляет свойство display равно none.

$(".my-block").css('display','none');

Или ещё проще:

$(".my-block").hide();

Очень часто нужно по клику на како-нибудь элемент показывать другой элемент.А при повторном клике на первый-снова его скрывать. Для этого есть замечательный метод toggle. Ниже я приведу реальный пример работы jQuery.Можете опнажимать на кнопки.

Пример

Свойствами этого блока с текстом
мы будем манипулировать средствами jQuery.

Исходный код

<input type="button" value="Показать/скрыть" onclick="tgBlock()" /><br />
<br />
<input type="button" value="Зелёный" onclick="sCol('#30ff61')" /><br />
<input type="button" value="Красный" onclick="sCol('#ff0f27')" /><br />
<input type="button" value="Синий" onclick="sCol('#0f23ff')" /><br />
<input type="button" value="Желтый" onclick="sCol('#fffe11')" /><br />
<input type="button" value="Фиолетовый" onclick="sCol('#fe0fff')" /><br />
<br />
<input type="button" value="Рамка" onclick="sBor(true)" /><br />
<input type="button" value="Убрать рамку" onclick="sBor(false)" /><br />
<br />
 
<p id="test-p">Свойствами этого блока с текстом 
мы будем манипулировать средствами jQuery.</p>
 
<script type="text/javascript">
function tgBlock(){
	$("#test-p").toggle();
}
function sCol(color){
	$("#test-p").css('color',color);
}
function sBor(action){
	if(action){
		$("#test-p").css('border','3px black dotted');
	}else{
		$("#test-p").css('border','none');
	}
}
</script>