css

« Обратно к таблицам стилей CSS

[редактировать]

css( имя )

Возвращает свойство стиля для первого совпавшего элемента.
Сокращения свойств CSS (например, margin, background, border) не поддерживаются. Например, если необходимо получить значения margin, то используйте:  $(elem).css('marginTop') и $(elem).css('marginRight'), и т.д.
Аргументы:

имя Строка
Имя свойства, к которому необходимо получить доступ.
Примеры:

Получает доступ к цвету фона элемента div на котором пользователь кликнул мышкой.
    $("div").click(function () {
      var color = $(this).css("background-color");
      $("#result").html("That div is <span style='color:" +
                         color + ";'>" + color + "</span>.");
    });
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("div").click(function () {
      var color = $(this).css("background-color");
      $("#result").html("That div is <span style='color:" +
                         color + ";'>" + color + "</span>.");
    });

  });
  </script>

  <style>
  div { width:60px; height:60px; margin:5px; float:left; }
  </style>
</head>
<body>
  <span id="result"> </span>
  <div style="background-color:blue;"></div>

  <div style="background-color:rgb(15,99,30);"></div>
  <div style="background-color:#123456;"></div>
  <div style="background-color:#f11;"></div>
</body>

</html>
Name Type

[редактировать]

css( свойства )

Устанавливает свойства стиля css всех элементов набора, используя при этом объект, который содержит пары ключ/значение.
Это лучший способ указать большое количество свойств стиля для каждого совпавшего элемента.
Имейте в виду, что если ключ содержит дефис, к примеру, «background-color», то значение должно либо заключаться в кавычки, либо указываться следующим образом (camel case): backgroundColor. Поскольку «float» и «class» являются зарезервированными словами в JavaScript, то их рекомендуется всегда брать в кавычки. jQuery нормализирует свойство «opacity» в браузере Internet Explorer.
Аргументы:

свойства Map
Пары ключ:значение для указания свойств стиля.
Примеры:

Устанавливает цвет текста всех параграфов на красный и цвет фона на синий:
    $("p").hover(function () {
      $(this).css({'background-color' : 'yellow', 'font-weight' : 'bolder'});
    }, function () {
      var cssObj = {
        'background-color' : '#ddd',
        'font-weight' : '',
        'color' : 'rgb(0,40,244)'
      }
      $(this).css(cssObj);
    });
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("p").hover(function () {
      $(this).css({'background-color' : 'yellow', 'font-weight' : 'bolder'});
    }, function () {
      var cssObj = {
        'background-color' : '#ddd',
        'font-weight' : '',
        'color' : 'rgb(0,40,244)'
      }
      $(this).css(cssObj);
    });

  });
  </script>
  <style>

  p { color:green; }
  </style>
</head>
<body>
  <p>
    Move the mouse over a paragraph.
  </p>
  <p>

    Like this one or the one above.
  </p>
</body>
</html>
Если имя свойства включает в себя «-», то заключайте его в двойные кавычки.
    $("p").hover(function () {
      $(this).css({ "background-color":"yellow", "font-weight":"bolder" });
    }, function () {
      var cssObj = {
        "background-color": "#ddd",
        "font-weight": "",
        color: "rgb(0,40,244)"

      }
      $(this).css(cssObj);
    });
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("p").hover(function () {
      $(this).css({ "background-color":"yellow", "font-weight":"bolder" });
    }, function () {
      var cssObj = {
        "background-color": "#ddd",
        "font-weight": "",
        color: "rgb(0,40,244)"

      }
      $(this).css(cssObj);
    });

  });
  </script>
  <style>
  p { color:green; }
  </style>
</head>
<body>

  <p>
    Move the mouse over a paragraph.
  </p>
  <p>
    Like this one or the one above.
  </p>
</body>
</html>
Name Type

[редактировать]

css( имя, значение )

Устанавливает значение одного свойства стиля css для всех элементов набора.
Если указывается число, то оно автоматически конвертируется в значение по пикселям.
Аргументы:

имя Строка
Имя свойства.
значение Строка, Число
Значение свойства.
Примеры:

При прохождении курсора над текстом изменяет его цвет на красный.
    $("p").mouseover(function () {
      $(this).css("color","red");
    });
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("p").mouseover(function () {
      $(this).css("color","red");
    });

  });
  </script>

  <style>
  p { color:blue; width:200px; font-size:14px; }
  </style>
</head>
<body>
  <p>
    Just roll the mouse over me.
  </p>

  <p>
    Or me to see a color change.
  </p>
</body>
</html>
Выделяет слово в параграфе на котором пользователь кликнул мышкой.
    var words = $("p:first").text().split(" ");
    var text = words.join("</span> <span>");
    $("p:first").html("<span>" + text + "</span>");
    $("span").click(function () {
      $(this).css("background-color","yellow");
    });
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    var words = $("p:first").text().split(" ");
    var text = words.join("</span> <span>");
    $("p:first").html("<span>" + text + "</span>");
    $("span").click(function () {
      $(this).css("background-color","yellow");
    });

  });
  </script>

  <style>
  p { color:blue; font-weight:bold; cursor:pointer; }
  </style>
</head>
<body>
  <p>
    Once upon a time there was a man
    who lived in a pizza parlor. This
    man just loved pizza and ate it all
    the time.  He went on to be the
    happiest man in the world.  The end.
  </p>

</body>
</html>
Name Type