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

Question

Я пытаюсь изменить 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>

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

Answer 1

Не обращайте внимания на людей, которые предполагают, что имя свойства является проблемой.В документации jQuery API явно указано, что любая нотация приемлема: 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>

Answer 2

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

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

Или:

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

Answer 3

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

---

Метод 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.

Answer 4

Когда вы используете свойство 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 .

Answer 5

Метод .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'.

Answer 6

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

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

или

var $block = $('.block')    

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

Answer 7

$(function(){ 
$('.bordered').css({
"border":"1px solid #EFEFEF",
"margin":"0 auto",
"width":"80%"
});

$('h1').css({
"margin-left":"10px"
});

$('#myParagraph').css({
"margin-left":"10px",
"font-family":"sans-serif"
});

});

<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>

Answer 8

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

Answer 9

<!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>

Answer 10

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

пропущено "}" после white"

замените его на

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