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

Опубликовано 2012.08.12 в разделе JavaScript

Библиотека 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>

4 Комментариев

Оставить комментарий

  1. Гость 2013/02/16

    Добрый! И куда код вставлять...?

    Ответить

    1. Админ 2013/02/17

      Javascript код? Между тэгами

      1. <script type="text/javascript">
      и
      1. </script>

      А их размещаешь между
      1. <head>
      и
      1. </head>
      .
      Или в js файле.

      Ответить

  2. Гость 2012/08/29

    Читаю: Свойствами этого блока с текстом
    мы будем манипулировать средствами jQuery
    А где в коде намёк на jQuery?
    если я вижу только:

    Ответить

    1. Админ 2012/08/30

      Как где?
      Сразу после абзаца идёт код:

      1. <script type="text/javascript">
      2. function tgBlock(){
      3. $("#test-p").toggle();
      4. }
      5. function sCol(color){
      6. $("#test-p").css('color',color);
      7. }
      8. function sBor(action){
      9. if(action){
      10. $("#test-p").css('border','3px black dotted');
      11. }else{
      12. $("#test-p").css('border','none');
      13. }
      14. }
      15. </script>


      Разве это не jQuery

      Ответить

Ваш комментарий успешно создан

Ваш комментарий

  • Для выделения кода оберните его в тэги <code> и </code>
  • Отметьте шестерёнку