jQuery.attr（“style”）vs jQuery.css（）

Question

我的同事使用此代码来显示元素：

$('selector here').attr('style','display:inline-block');

我通常使用它：

$('selector here').css('display','inline-block');

我知道使用style属性的内联CSS是一种不好的做法，但除此之外，这两行中的任何一行都会产生更高优先级的CSS，或者这两行是完全同意的查看元素的外观？

我假设.css()的优先级可能较低，因为内联CSS的优先级更高。

Answer 1

两者都将style属性添加到元素中。我说唯一的区别是当您一次设置多个CSS属性时代码的可读性。除此之外，css()添加了样式，只有在已经存在的情况下才会替换。通过使用attr('style', ...)，您每次都会替换整个样式属性。

假设你有一个元素如下： <div class='element' style='color:red'>test</div>

当您使用$('.element').attr('style', 'display:none')时，这会导致： <div class='element' style='display:none'>test</div>

当您使用$(.element').css('display', 'none')时，这会导致： <div class='element' style='color:red;display:none'>test</div>。

使用css()还允许您设置多个样式属性，同时保持代码可读：

$('.element').css({
    color: red,
    textDecoration: 'underline',
    // etc.
})