Як змінити 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, тоді ви повинні використовувати фігурну Brace на початку і в кінці. Вам не вистачає кінцевої фігурної дужки.

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

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

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

Ви можете ознайомитись із цим підручником із селектора jQuery CSS .

.css()Метод робить його дуже просто знайти і властивість набору CSS і в поєднанні з іншими методами , такими як .animate (), ви можете зробити деякі цікаві ефекти на вашому сайті.

У своїй найпростішій формі .css()метод може встановити єдине властивість CSS для певного набору відповідних елементів. Ви просто передаєте властивість і значення у вигляді рядків і змінити властивості CSS елемента.

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

Це дозволило б встановити властивість 'color-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"});