Jak zmienić CSS za pomocą jQuery?

Próbuję zmienić CSS za pomocą 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>

Czego tu brakuje?

Zignoruj ​​osoby, które sugerują, że problemem jest nazwa nieruchomości. Dokumentacja interfejsu API jQuery wyraźnie stwierdza, że ​​dopuszczalna jest każda notacja: http://api.jquery.com/css/

Rzeczywisty problem polega na tym, że w tej linii brakuje zamykającego nawiasu klamrowego:

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

Zmień to na:

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

Oto działające demo: 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>

Możesz to zrobić:

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

Lub:

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

Aby trochę wyjaśnić, ponieważ niektóre odpowiedzi zawierają nieprawidłowe informacje:

Metoda jQuery .css () pozwala w wielu przypadkach na użycie notacji DOM lub CSS. Tak więc obie backgroundColori background-colorwykonają zadanie.

Dodatkowo, kiedy dzwonisz .css()z argumentami, masz dwie możliwości wyboru, jakie mogą być argumenty. Mogą to być 2 ciągi znaków oddzielone przecinkami reprezentujące właściwość CSS i jej wartość lub obiekt JavaScript zawierający jedną lub więcej par klucz-wartość właściwości i wartości CSS.

Podsumowując, jedyną wadą twojego kodu jest brak }. Wiersz powinien brzmieć:

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

Nie możesz zostawić nawiasów klamrowych, ale możesz zostawić cudzysłowy poza backgroundColori color. Jeśli używasz background-color, musisz umieścić go w cudzysłowie z powodu łącznika.

Ogólnie rzecz biorąc, dobrym zwyczajem jest cytowanie obiektów Javascript, ponieważ mogą pojawić się problemy, jeśli nie zacytujesz istniejącego słowa kluczowego .

Ostatnia uwaga jest taka, że o jQuery .ready () metody

$(handler);

jest synonimem :

$(document).ready(handler);

a także trzecią niezalecaną formą.

Oznacza to, że $(init)jest to całkowicie poprawne, ponieważ initw tym przypadku jest to program obsługi. Więc initzostanie zwolniony, gdy DOM zostanie zbudowany.

Jeśli używasz właściwości Multiple css z jQuery, musisz użyć nawiasu klamrowego na początku i na końcu. Brakuje kończącego nawiasu klamrowego.

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

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

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

Możesz rzucić okiem na ten samouczek selektora jQuery CSS .

Ta .css()metoda sprawia, że ​​wyszukiwanie i ustawianie właściwości CSS jest bardzo proste, a w połączeniu z innymi metodami, takimi jak .animate (), możesz uzyskać fajne efekty na swojej stronie.

W najprostszej postaci .css()metoda może ustawić pojedynczą właściwość CSS dla określonego zestawu dopasowanych elementów. Po prostu przekazujesz właściwość i wartość jako ciągi znaków, a właściwości CSS elementu są zmieniane.

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

Spowoduje to ustawienie właściwości „background-color” na „red” dla każdego elementu, który ma klasę „example”.

Ale nie jesteś ograniczony do zmiany jednej właściwości na raz. Jasne, możesz dodać kilka identycznych obiektów jQuery, z których każdy zmienia tylko jedną właściwość na raz, ale powoduje to kilka niepotrzebnych wywołań DOM i jest to dużo powtarzającego się kodu.

Zamiast tego można przekazać do .css()metody obiekt JavaScript, który zawiera właściwości i wartości w postaci par klucz / wartość. W ten sposób każda właściwość zostanie ustawiona w obiekcie jQuery jednocześnie.

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

Spowoduje to zmianę wszystkich tych właściwości CSS w elementach „.example”.

Chciałem tylko dodać, że używając liczb dla wartości metodą css, musisz dodać je poza apostrofem, a następnie dodać jednostkę CSS w apostrofach.

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

lub

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 ”});

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

jej brakuje "}"powhite"

zmień to na to

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