jQuery:使用对象设置元素的 'style' 属性

Question

前几天我在我们的代码库中看到了这一点:

            link.attr('style', map({
                color: '#9a4d9e',
                cursor: 'default'
            }));

map 定义为:

function map(map) {
    var cssValue = [];

    for (var o in map) {
        cssValue.push(o + ':' + map[o] + ';')
    }

    return cssValue.join(';');
}

map 是必须的吗？有没有更短的方法来做到这一点？

需要注意的是，“style”属性会覆盖“class”属性中添加/定义的类设置的任何样式。

Answer 1

可能不是。更好的解决方案可能是使用 CSS:

link.css({color: '#9a4d9e',
          cursor: 'default'});

但是，.attr('style',) 也会删除之前的内联样式，因此其行为并不完全相同。
如果您要使用 attr，它的输入应该是字符串，而不是对象，它不是专门用于使用 style 属性的。在这种情况下，另一种选择是:

link.attr('style', "color:'#9a4d9e';cursor:'default'");

在这种情况下看起来更干净。在其他情况下，map 可以更轻松地将变量插入到 CSS 中。
不过，map 的命名本来可以更好。它还存在一个实现错误 - 它在属性之间添加了双分号:color:red;;cursor:default;

删除预览样式的一个简单解决方案是在调用 css 之前调用 .removeAttr('style')。