javascript - 如何使用 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 钩子(Hook)。您定义 Hook ，然后设置所需的各个属性， Hook 负责额外的处理，例如添加前缀。 http://api.jquery.com/jQuery.cssHooks/

如果您的站点非常简单，这可能有点矫枉过正，但如果您正在制作任何类型的交互性很强的站点，并且需要在所有浏览器中都完美无缺，则钩子(Hook)可以使应用 CSS 变得更加简单。

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