jQuery.attr("style")vsjQuery.css()

我的同事使用此代码显示一个元素:

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

我通常使用这个:

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

我知道使用该style属性的内联CSS 是一种不好的做法,但除此之外,这两行中的任何一行都会产生更高优先级的CSS,或者从元素看起来如何的角度来看这两行是完全相同的？

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

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

假设你有一个元素如下:

使用时$('.element').attr('style', 'display:none')会导致:

当你使用$(.element').css('display', 'none')它时会导致:

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

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