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

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

Библиотека jQuery позволяет свободно управлять css свойствами элементов DOM дерева. Если вы уже знакомы с основами синтаксиса jQuery - то разобраться со стилями для вас не составит никакого труда. Задать свойство можно так:
  1. $(element).css('color','green');
Вот и всё, теперь у элемента есть свойство color, которое равно green. Например имеем разметку:
  1. <p id="abzac">
  2. Подкрасить в красный цвет яваскриптом.
  3. </p>
Код на jQuery будет выглядеть следующим образом:
  1. $("#abzac").css('color','red');
Нужно скрыть элемент - не вопрос,добавляет свойство display равно none.
  1. $(".my-block").css('display','none');
Или ещё проще:
  1. $(".my-block").hide();
Очень часто нужно по клику на како-нибудь элемент показывать другой элемент.А при повторном клике на первый-снова его скрывать. Для этого есть замечательный метод toggle. Ниже я приведу реальный пример работы jQuery.Можете опнажимать на кнопки.
Пример







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

Исходный код
  1. <input type="button" value="Показать/скрыть" onclick="tgBlock()" /><br />
  2. <br />
  3. <input type="button" value="Зелёный" onclick="sCol('#30ff61')" /><br />
  4. <input type="button" value="Красный" onclick="sCol('#ff0f27')" /><br />
  5. <input type="button" value="Синий" onclick="sCol('#0f23ff')" /><br />
  6. <input type="button" value="Желтый" onclick="sCol('#fffe11')" /><br />
  7. <input type="button" value="Фиолетовый" onclick="sCol('#fe0fff')" /><br />
  8. <br />
  9. <input type="button" value="Рамка" onclick="sBor(true)" /><br />
  10. <input type="button" value="Убрать рамку" onclick="sBor(false)" /><br />
  11. <br />
  12.  
  13. <p id="test-p">Свойствами этого блока с текстом
  14. мы будем манипулировать средствами jQuery.</p>
  15.  
  16. <script type="text/javascript">
  17. function tgBlock(){
  18. $("#test-p").toggle();
  19. }
  20. function sCol(color){
  21. $("#test-p").css('color',color);
  22. }
  23. function sBor(action){
  24. if(action){
  25. $("#test-p").css('border','3px black dotted');
  26. }else{
  27. $("#test-p").css('border','none');
  28. }
  29. }
  30. </script>