如何使用javascript变量应用多个样式

Question

我的意思是:

var prefix = 'webkit';
element.style['marginTop'] = '20px';
element.style[prefix + 'Transform'] = 'translate(100%, 0, 0)';

被重写成一个单独的语句?

在jQuery中，css()可以接受带有属性的对象，但是当属性由变量组成时，它不起作用

$(element).css({
  marginTop: '20px',
  prefix + 'Transform': 'translate(100%, 0, 0)'  // doesn't work
});

Answer 1

做到这一点的一种方法是使用CSS钩子。定义钩子，然后设置所需的各个属性，钩子负责额外的处理，比如添加前缀。http://api.jquery.com/jQuery.cssHooks/

如果你的网站非常简单，这可能是多余的，但如果你正在制作任何一种需要在所有浏览器中完美的交互式网站，钩子可以使应用CSS更简单。

另一种方法是添加你手动应用的CSS样式作为类，并在必要时添加/删除这些类。

Answer 2

应该可以了

element.style.cssText = "marginTop: 20px; " + prefix + "Transform: translate(100%, 0, 0);";

但是你正在寻找一种使用jQuery的方法，对吗?

在这种情况下，你可以做

var styles = {};
styles['marginTop'] = '20px';
styles[prefix + 'Transform'] = 'translate(100%, 0, 0)';
$(element).css(styles);

如果可以的话，最好为你的样式使用类，这样你就可以将逻辑与输出分开，这绝对是最佳实践。