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

Ответ 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>

Ответ 2

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

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

Или:

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

Ответ 3

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

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

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

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

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

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

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

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

$(handler);

синоним:

$(document).ready(handler);

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

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

Ответ 4

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

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

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

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

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

Ответ 5

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

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

или же

var $block = $('.block')    

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

Ответ 6

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

Ответ 7

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

Ответ 8

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

Ответ 9

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

Ответ 10

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

отсутствует "}" после white"

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

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

Ответ 11

изменить CSS с помощью JQuery попробуйте это

$("h1").css("backgroundColor", "yellow");