Attribute和Property的區別

今天我們來掰扯掰扯attribute和property的區別，搞開發的人可能都見過這兩個單詞，但是他們在程式設計中到底有什麼區別呢？我們先來看一篇老外的文章：

翻譯自：

什麼是property？

js dom物件都擁有property，這些property是一種類似於特定元素的例項變數之類的東西。比如，乙個property可以是各種不同的型別（boolean，string等等）。property可以通過jquery的prop方法來進行訪問（詳見下面的**），也可以通過vanilla js物件進行互動。

我們來看一下下面這段**：

hi
$('#linkid').prop('href'); // returns ""
$('#linkid').prop('name'); // returns "linkname"
$('#linkid').prop('id'); // returns "linkid"
$('#linkid').prop('classname'); // returns "link classes"

a標籤中所有的屬性都可以通過prop方法來獲取，甚至是我們並沒有在標籤中指定的屬性

prop方法也可以用來更新標籤中的屬性值，**如下：

hi
$('#linkid').prop('href', 'page1.html');
$('#linkid').prop('href'); // returns ""

什麼是attribute？

屬性存在於html本身，而不是在dom中（其實我也不太明白作者是幾個意思???）

它和property非常相似，但並不完全相同，當有乙個可用的property時，推薦你使用property而不是attributes

如果你使用attr去獲取乙個標籤的attr，那你真的會得到這個標籤（你會得到這個標籤本身的字串???），也就是說attribute僅僅能獲取string'（字串）屬性，**如下：

$('input').prop('checked'); // returns true
$('input').attr('checked'); // returns "checked"

如果乙個元素擁有乙個預設值，那麼attr方法就會獲得這個元素的預設值，即使這個元素的值被更新樂，**如下：

$('input').prop('value', '456user');
$('input').prop('value'); // returns "456user"
$('input').attr('value'); // returns "user123"

當標籤中沒有關聯的property時，我們可以使用attribute來設定自定義屬性，**如下：

$('input').attr('customattribute', 'something custom');
$('input').attr('customattribute'); // returns "something custom"
$('input').prop('customattribute'); // returns undefined

注意，在上面的**中，使用prop方法無法獲取到attr方法設定的屬性值

同理，我們也可以用prop來設定自定義屬性，但是attr也一樣無法獲取該屬性：

$('input').prop('customattribute', 'something custom');
$('input').prop('customattribute'); // returns "something custom"
$('input').attr('customattribute'); // returns undefined

今天先寫到這兒吧

Attribute和Property的區別

Attribute 和 Parameter 的區別

property和attribute的區別

Property和attribute的區別

Attribute和Property的區別

Attribute 和 Parameter 的區別

property和attribute的區別

Property和attribute的區別

相關推薦