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

Question

我的同事使用这段代码来显示一个元素:

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

我通常使用这个:

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

我知道使用 style 属性的内联 CSS 是一种不好的做法，但除此之外，这两行中的任何一行是否会导致更高优先级的 CSS，或者这两行是否完全相同元素的 Angular 会是什么样子？

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

Answer 1

两者都将样式属性添加到您的元素。我想说的唯一区别是一次设置多个 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.
})