Làm cách nào để xác định nhiều thuộc tính CSS trong jQuery?

Có cách thức cú pháp nào trong jQuery để xác định nhiều thuộc tính CSS mà không xâu chuỗi mọi thứ bên phải như thế này không:

$("#message").css("width", "550px").css("height", "300px").css("font-size", "8pt");

Nếu bạn có, giả sử, 20 trong số các mã của bạn sẽ trở nên khó đọc, giải pháp nào?

Ví dụ, từ API jQuery, jQuery hiểu và trả về giá trị chính xác cho cả hai

.css({ "background-color": "#ffe", "border-left": "5px solid #ccc" }) 

và

.css({backgroundColor: "#ffe", borderLeft: "5px solid #ccc" }).

Lưu ý rằng với ký hiệu DOM, dấu ngoặc kép quanh tên thuộc tính là tùy chọn , nhưng với ký hiệu CSS, chúng được yêu cầu do dấu gạch nối trong tên.

Tốt hơn là chỉ sử dụng .addClass()ngay cả khi bạn có 1 hoặc nhiều hơn. Dễ bảo trì và dễ đọc hơn.

Nếu bạn thực sự có nhu cầu làm nhiều thuộc tính CSS thì hãy sử dụng như sau:

.css({
   'font-size' : '10px',
   'width' : '30px',
   'height' : '10px'
});

Lưu ý!
Bất kỳ thuộc tính CSS nào có dấu gạch nối cần được trích dẫn.
Tôi đã đặt dấu ngoặc kép để không ai cần phải làm rõ điều đó và mã sẽ có chức năng 100%.

Vượt qua nó như một đối tượng:

$(....).css({
    'property': 'value', 
    'property': 'value'
});

http://docs.jquery.com/CSS/css#properies

$('#message').css({ width: 550, height: 300, 'font-size': '8pt' });

Sử dụng một đối tượng đơn giản, bạn có thể ghép các chuỗi đại diện cho tên thuộc tính với các giá trị tương ứng của chúng. Thay đổi màu nền và làm cho văn bản đậm nét hơn, ví dụ như sau:

$("#message").css({
    "background-color": "#0F0", 
    "font-weight"     : "bolder"
});

Ngoài ra, bạn cũng có thể sử dụng tên thuộc tính JavaScript:

$("#message").css({
    backgroundColor: "rgb(128, 115, 94)",
    fontWeight     : "700"
});

Thông tin thêm có thể được tìm thấy trong tài liệu của jQuery .

vui lòng thử cái này

$(document).ready(function(){
    $('#message').css({"color":"red","font-family":"verdana"});
})

Bạn cũng có thể sử dụng attrcùng với style:

$('#message').attr("style", "width:550; height:300; font-size:8px" );

Đồng ý với redsapes tuy nhiên điều đáng nói là nếu bạn có một tài sản hai từ như text-alignbạn sẽ làm điều này:

$("#message").css({ width: '30px', height: '10px', 'text-align': 'center'});

$("#message").css({"width" : "550px", "height" : "300px", "font-size" : "8pt"});

Ngoài ra, có thể tốt hơn khi sử dụng jQuery tích hợp sẵn addClass để làm cho dự án của bạn có khả năng mở rộng hơn.

Nguồn: Cách làm: jQuery Thêm CSS và loại bỏ CSS

Thử cái này

$(element).css({
    "propertyName1":"propertyValue1",
    "propertyName2":"propertyValue2"
})

Kịch bản

 $(IDname).css({
    "background":"#000",
    "color":"#000"
})

Html

<div id="hello"></div>

Bạn có thể thử cái này

$("p:first").css("background-color", "#B2E0FF").css("border", "3px solid red");

Cách tốt nhất để sử dụng biến

var style1 = {
   'font-size' : '10px',
   'width' : '30px',
   'height' : '10px'
};
$("#message").css(style1);

Nếu bạn muốn thay đổi nhiều thuộc tính css thì bạn phải sử dụng cấu trúc đối tượng như dưới đây:

$(document).ready(function(){
   $('#message').css({
                   "background-color": "#0F0",
                   "color":"red",
                   "font-family":"verdana"
                });
});

nhưng nó trở nên tồi tệ hơn khi chúng tôi muốn thay đổi nhiều phong cách , vì vậy những gì tôi đề xuất với bạn là thêm một lớp thay vì thay đổi css bằng jQuery và thêm một lớp cũng dễ đọc hơn.

xem ví dụ dưới đây:

CSS

<style>
    .custom-class{
       font-weight: bold;
       background: #f5f5f5;
       text-align: center;
       font-size: 18px;
       color:red;
    }
</style>

jQuery

$(document).ready(function(){
   $('#message').addclass('custom-class');
});

Một lợi thế của ví dụ sau so với trước là nếu bạn muốn thêm một số css onclickcủa một cái gì đó và muốn loại bỏ css đó vào lần nhấp thứ hai thì trong ví dụ sau bạn có thể sử dụng.toggleClass('custom-class')

trong ví dụ trước đây bạn phải đặt tất cả css với các giá trị khác nhau mà bạn đã đặt trước đó và nó sẽ phức tạp, vì vậy sử dụng tùy chọn lớp sẽ là giải pháp tốt hơn.

Bạn có thể dùng

$('selector').css({'width:'16px', 'color': 'green', 'margin': '0'});

Cách tốt nhất là sử dụng $ ('bộ chọn'). AddClass ('lớp tùy chỉnh') và

.custom-class{
width:16px,
color: green;
margin: 0;
}