jQuery.attr（ 「風格」）與jQuery.css（）

Question

我的同事使用此代碼顯示元素：

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

我通常使用這樣的：

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

我知道內聯CSS使用style屬性是一種不好的做法，但除此之外，這兩行中的任何一行是否會產生更高優先級的CSS，還是從這些元素的外觀來看，這兩行完全相同？

我假設.css()可能會有一個較低的優先級，因爲內聯CSS具有更大的優先級。

Answer 1

兩者都將style屬性添加到您的元素。我會說唯一的區別是當你一次設置多個css屬性時代碼的可讀性。除此之外，CSS添加樣式，只有替換，如果已經存在。通過使用attr（'style'，...），您每次都會替換整個樣式標籤。

比方說，你有如下元素：當您使用$('.element').attr('style', 'display:none')這將導致 <div class='element' style='color:red'>test</div>

： <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. 
})