Làm cách nào để thay đổi CSS bằng jQuery?

Tôi đang cố gắng thay đổi CSS bằng 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>

Tôi đang thiếu gì ở đây?

Bỏ qua những người đang đề nghị rằng tên tài sản là vấn đề. Tài liệu API jQuery nêu rõ rằng một trong hai ký hiệu đều được chấp nhận: http://api.jquery.com/css/

Vấn đề thực tế là bạn đang thiếu một dấu ngoặc nhọn đóng trên dòng này:

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

Thay đổi nó thành này:

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

Đây là bản demo hoạt động: 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>

Bạn có thể làm một trong hai:

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

Hoặc là:

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

Để làm sáng tỏ mọi thứ một chút, vì một số câu trả lời đang cung cấp thông tin không chính xác:

Phương thức jQuery .css () cho phép sử dụng ký hiệu DOM hoặc CSS trong nhiều trường hợp. Vì vậy, cả hai backgroundColorvà background-colorsẽ hoàn thành công việc.

Ngoài ra, khi bạn gọi .css()với các đối số, bạn có hai lựa chọn về các đối số có thể là gì. Chúng có thể là 2 chuỗi được phân tách bằng dấu phẩy đại diện cho một thuộc tính css và giá trị của nó hoặc nó có thể là một đối tượng Javascript chứa một hoặc nhiều cặp giá trị khóa của các thuộc tính và giá trị CSS.

Tóm lại, điều duy nhất sai với mã của bạn là thiếu }. Dòng nên đọc:

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

Bạn không thể bỏ dấu ngoặc nhọn ra, nhưng bạn có thể bỏ dấu ngoặc kép từ xung quanh backgroundColorvà color. Nếu bạn sử dụng, background-colorbạn phải đặt dấu ngoặc kép xung quanh nó vì dấu gạch nối.

Nói chung, đó là một thói quen tốt để trích dẫn các đối tượng Javascript của bạn, vì các vấn đề có thể phát sinh nếu bạn không trích dẫn một từ khóa hiện có .

Một lưu ý cuối cùng là về phương thức jQuery. Yet ()

$(handler);

là đồng nghĩa với:

$(document).ready(handler);

cũng như với một hình thức thứ ba không được đề nghị.

Điều này có nghĩa $(init)là hoàn toàn chính xác, vì initlà xử lý trong trường hợp đó. Vì vậy, initsẽ bị sa thải khi DOM được xây dựng.

Khi bạn đang sử dụng nhiều thuộc tính css với jQuery thì bạn phải sử dụng Brace xoăn khi bắt đầu và cuối cùng. Bạn đang thiếu niềng răng kết thúc.

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

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

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

Bạn có thể xem hướng dẫn về Bộ chọn CSS jQuery này .

Các .css()phương pháp làm cho nó siêu đơn giản để tìm và thuộc tính CSS bộ và kết hợp với các phương pháp khác như .animate (), bạn có thể làm cho một số hiệu ứng bắt mắt trên trang web của bạn.

Ở dạng đơn giản nhất, .css()phương thức có thể đặt một thuộc tính CSS cho một tập hợp các phần tử phù hợp cụ thể. Bạn chỉ cần chuyển thuộc tính và giá trị dưới dạng chuỗi và các thuộc tính CSS của phần tử được thay đổi.

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

Điều này sẽ đặt thuộc tính 'màu nền' thành 'đỏ' cho bất kỳ phần tử nào có lớp 'ví dụ'.

Nhưng bạn không bị giới hạn chỉ thay đổi một tài sản tại một thời điểm. Chắc chắn, bạn có thể thêm một loạt các đối tượng jQuery giống hệt nhau, mỗi đối tượng chỉ thay đổi một thuộc tính tại một thời điểm, nhưng điều này đang thực hiện một số cuộc gọi không cần thiết đến DOM và rất nhiều mã được lặp lại.

Thay vào đó, bạn có thể truyền cho .css()phương thức một đối tượng Javascript chứa các thuộc tính và giá trị dưới dạng cặp khóa / giá trị. Theo cách này, mỗi thuộc tính sau đó sẽ được đặt trên đối tượng jQuery cùng một lúc.

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

Điều này sẽ thay đổi tất cả các thuộc tính CSS này trên các phần tử '.example'.

Chỉ muốn thêm rằng khi sử dụng số cho các giá trị với phương thức css, bạn phải thêm chúng bên ngoài dấu nháy đơn và sau đó thêm đơn vị CSS vào dấu nháy đơn.

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

hoặc là

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 ({"màu nền": "- webkit-linear-gradient (# e9e9e9, rgba (255, 255, 255, 0.43137254901960786), # e9e9e9)", "color": " 454545 "," đệm ":" 8px "});

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

nó mất tích "}"sauwhite"

thay đổi nó thành cái này

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