Как изменить CSS с помощью jQuery?

Я пытаюсь изменить CSS с помощью jQuery:

$(init);
    
function init() {
    $("h1").css("backgroundColor", "yellow");
    $("#myParagraph").css({"backgroundColor":"black","color":"white");
    $(".bordered").css("border", "1px solid black");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="bordered">
    <h1>Header</h1>
    <p id="myParagraph">This is some paragraph text</p>
</div>

Что мне здесь не хватает?

Не обращайте внимания на людей, которые предполагают, что проблема заключается в названии свойства. В документации API jQuery прямо указано, что допустимы любые обозначения: http://api.jquery.com/css/

Фактическая проблема заключается в том, что в этой строке отсутствует закрывающая фигурная скобка:

$("#myParagraph").css({"backgroundColor":"black","color":"white");

Измените это на это:

$("#myParagraph").css({"backgroundColor": "black", "color": "white"});

Вот рабочая демонстрация: http://jsfiddle.net/YPYz8/

$(init);
    
function init() {
    $("h1").css("backgroundColor", "yellow");
    $("#myParagraph").css({ "backgroundColor": "black", "color": "white" });
    $(".bordered").css("border", "1px solid black");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="bordered">
    <h1>Header</h1>
    <p id="myParagraph">This is some paragraph text</p>
</div>

Вы можете сделать либо:

$("h1").css("background-color", "yellow");

Или:

$("h1").css({backgroundColor: "yellow"});

Чтобы немного прояснить ситуацию, поскольку некоторые ответы содержат неверную информацию:

Метод jQuery .css () во многих случаях позволяет использовать нотацию DOM или CSS. Итак, оба backgroundColorи background-colorвыполнят свою работу.

Кроме того, когда вы вызываете .css()с аргументами, у вас есть два варианта выбора аргументов. Они могут быть либо двумя строками, разделенными запятыми, представляющими свойство css и его значение, либо это может быть объект Javascript, содержащий одну или несколько пар ключевых значений свойств и значений CSS.

В заключение единственное, что не так с вашим кодом, - это его отсутствие }. Строка должна гласить:

$("#myParagraph").css({"backgroundColor":"black","color":"white"});

Вы не можете убрать фигурные скобки, но можете оставить кавычки вокруг backgroundColorи color. Если вы используете, background-colorвы должны заключить его в кавычки из-за дефиса.

В общем, это хорошая привычка цитировать ваши объекты Javascript, поскольку могут возникнуть проблемы, если вы не укажете существующее ключевое слово .

Последнее замечание о том , что в JQuery .ready () метод

$(handler);

является синонимом :

$(document).ready(handler);

а также с третьей не рекомендованной формой.

Это означает, что $(init)это полностью правильно, поскольку initв данном случае является обработчиком. Итак, initбудет запущен при построении DOM.

Когда вы используете свойство Multiple css с jQuery, вы должны использовать фигурную скобку в начале и в конце. Вам не хватает конечной фигурной скобки.

function init() {
 $("h1").css("backgroundColor", "yellow");

 $("#myParagraph").css({"background-color":"black","color":"white"});

 $(".bordered").css("border", "1px solid black");
}

Вы можете ознакомиться с этим учебным курсом по jQuery CSS Selector .

.css() метод упрощает поиск и установку свойств CSS, а в сочетании с другими методами, такими как .animate (), вы можете создавать интересные эффекты на своем сайте.

В своей простейшей форме .css()метод может установить одно свойство CSS для определенного набора совпадающих элементов. Вы просто передаете свойство и значение в виде строк, и свойства CSS элемента изменяются.

$('.example').css('background-color', 'red');

Это установит свойство 'background-color' в 'red' для любого элемента, имеющего класс 'example'.

Но вы не ограничены только изменением одного свойства за раз. Конечно, вы можете добавить кучу идентичных объектов jQuery, каждый из которых изменяет только одно свойство за раз, но это вызывает несколько ненужных вызовов DOM и много повторяющегося кода.

Вместо этого вы можете передать .css()методу объект Javascript, который содержит свойства и значения в виде пар ключ / значение. Таким образом, каждое свойство будет сразу установлено для объекта jQuery.

$('.example').css({
    'background-color': 'red',
    'border' : '1px solid red',
    'color' : 'white',
    'font-size': '32px',
    'text-align' : 'center',
    'display' : 'inline-block'
});

Это изменит все эти свойства CSS для элементов .example.

Просто хотел добавить, что при использовании чисел для значений с методом css вы должны добавить их за пределами апострофа, а затем добавить модуль CSS в апострофах.

$('.block').css('width',50 + '%');

или

var $block = $('.block')    

$block.css({ 'width': 50 + '%', 'height': 4 + 'em', 'background': '#FFDAB9' });

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
      $( document ).ready(function() {
         $('h1').css('color','#3498db');
      });
    </script>
    <style>
      .wrapper{
        height:450px;
        background:#ededed;
        text-align:center
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <h1>Title</h1>
    </div>
  </body>
</html>

$ (". radioValue"). css ({"background-color": "- webkit-linear-gradient (# e9e9e9, rgba (255, 255, 255, 0.43137254901960786), # e9e9e9)", "color": "# 454545 "," padding ":" 8px "});

неверный код:$("#myParagraph").css({"backgroundColor":"black","color":"white");

его не хватает "}"послеwhite"

изменить это на это

 $("#myParagraph").css({"background-color":"black","color":"white"});