jquery:.. Mệt mỏi của css() css() css()

Question

Tôi thực sự mệt mỏi của cú pháp như thế này:

.css('position','absolute').css('z-index',z-index) 
.css('border','1px solid #00AFFF').css('margin','-1px 0px 0px -1px') 
.css('left',pleft) 

Tôi tự hỏi nếu có cách nào để vượt qua tất cả các thông số trong một chức năng, một cái gì đó như:

.foo('position':'absolute','z-index':z-index, 
    'border':'1px solid #00AFFF','margin':'-1px 0px 0px -1px', 
    'left':pleft) 

Rất cảm kích mọi trợ giúp.

Answer 1

Vâng, vượt qua một đối tượng để .css() (còn mentioned in the docs):

.css({ 
    position: 'absolute', 
    left: pleft, 
    zIndex: 123 
    ... 
}); 

Lưu ý rằng bạn có thể sử dụng cả hai cú pháp cho các phím: zIndex, tức là phiên bản camelcase có thể được sử dụng trực tiếp trong JavaScript và 'z-index' (dấu ngoặc kép bắt buộc là - sẽ làm hỏng mọi thứ khác).

Đối với các tùy chọn luôn giống nhau - trong trường hợp của bạn có thể là position, border và margin - bạn nên đặt quy tắc CSS cổ điển thông qua bộ chọn lớp/id. Sau đó, bạn chỉ cần đặt các tùy chọn (động) còn lại qua .css().

Answer 2

Xác định phong cách trong lớp học riêng biệt

css

.myCustomClass 
{ 
    position: absolute; 
    border: 1px solid #00AFFF 
} 

Và js

.addClass('myCustomClass'); 

Và điều này là rất đơn giản để quản lý nếu phong cách đi quá phức tạp

Answer 3

$(element).css({'position':'absolute','z-index':zIndex, 
    'border':'1px solid #00AFFF','margin':'-1px 0px 0px -1px', 
    'left':pleft});