如何使用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);

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