it-swarm.com.ru

Как изменить 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>

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

121
user449914

Проигнорируйте людей, которые предполагают, что имя свойства - проблема. В документации 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>
191
Ender

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

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

Или же:

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

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


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

23
Peter Ajtai

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

10
Sadi

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

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

или же

var $block = $('.block')    

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

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

2
Stas

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

1
Daooji katara
<!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>
1
Nikit Barochiya
$(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>
1
user8743488

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

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

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

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