jquery: tired of css().css().css()

Question

我真的厌倦了这样的语法：

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

我想知道是否有任何方法可以在一个函数中传递所有参数，例如：

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

非常感谢任何帮助。

Answer 1

是的，将对象传递给.css()（文档中也提到）：

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

请注意，您可以对键使用两种语法：zIndex，即可以直接在 JavaScript 和 'z-index' 中使用的驼峰版本（需要引号，否则-会破坏事情）。

对于始终相同的选项（在您的情况下可能是position、border 和 margin - 通过类/id 选择器设置经典 CSS 规则可能是个好主意。然后，您只需通过.css()设置其余（动态）选项。

Answer 2

在单独的类中定义样式

.css

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

和 js

.addClass('myCustomClass');

如果样式太复杂，这很容易管理

Answer 3

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