2010-07-26 47 views
1

看來有時object.setAttribute(attrib,value)不等於在javascript中的object.attrib = value?有時object.setAttribute(attrib,value)不等於javascript中的object.attrib = value?

我有下面的代碼,它工作正常:

var lastMonthBn = document.createElement('input'); 
lastMonthBn.value='<';  // This works fine 
lastMonthBn.type='button'; // This works fine 

但是,下面的代碼不會:

var div = document.createElement('div'); 
div.class = 'datepickerdropdown'; // No luck here! 

,所以我需要使用以下命令:

div.setAttribute('class','datepickerdropdown'); 

我的問題是,爲什麼?從閱讀this,我認爲object.setAttribute(等值,值)是相同的object.blah =值??

回答

3

屬性和屬性並不相同,但DOM公開標準attributes through properties

您面臨的具體問題class屬性是classfuture reserved word

在一些實現中,未來保留字的使用可能導致異常。

出於這個原因,所述HTMLElement DOM接口提供了一種方法來訪問class屬性,通過className屬性:

var div = document.createElement('div'); 
div.className = 'datepickerdropdown'; 

記住,屬性是不一樣的性能,例如:

放大一個如下所示的DOM元素:

<div></div> 

如果向它添加自定義屬性,例如:

myDiv.setAttribute('attr', 'test'); 

屬性將被添加到元素:

<div attr="test"></div> 

訪問attr的div元素上的屬性,只給你undefined(因爲是屬性)。

myDiv.foo; // undefined 

如果一個屬性結合的元素,例如:

myDiv.prop = "test"; 

getAttribute方法將無法找到它,(因爲是的屬性):

myDiv.getAttribute('test'); // null 

注: IE錯誤弄亂屬性和特性。 :(

正如我前面所說的,DOM公開標準的屬性的屬性,但也有一些例外,你必須知道:

  • class屬性,就是通過className訪問屬性(你有問題)。
  • LABEL元素的for屬性,是通過htmlFor屬性訪問(與for聲明碰撞)。

屬性不區分大小寫,但JavaScript屬性的語言綁定不是,所以慣例是使用名稱camelCase來通過屬性訪問屬性,例如由兩個單詞形成的屬性,例如, cellSpacingcolSpanrowSpantabIndexmaxLengthreadOnlyframeBorderuseMap

+0

非常感謝,這是有道理的。這種方式訪問​​屬性時,有什麼關鍵字和大寫字母有什麼參考? – Chris 2010-07-26 04:30:44

+0

@Chris,只有少數幾個例外,其中暴露的屬性名稱與屬性名稱不匹配,例如可以通過'htmlFor'屬性訪問與'for'語句保留字衝突的'LABEL'元素的'for'屬性。對於其他屬性,例如由兩個單詞組成:'cellSpacing','colSpan','rowSpan','tabIndex','frameBorder'等。約定是使用「camelCase」,第一個字母小寫,然後是第一個字母以大寫字母開頭。請記住屬性名稱是*不區分大小寫*,但公開的屬性名稱不是。 – CMS 2010-07-26 04:49:34

+0

+1,但我認爲IE對屬性和屬性所做的混亂以及通常因此更好地使用屬性可能會更突出。我認爲這是一個普遍的混淆領域,而jquery通過其不明確和誤導性的'attr()'方法對其自身的困惑加劇了。 – 2010-07-26 08:36:10

0

需要注意的是,如果像「class」或「int」這樣的關鍵字存在,Safari等瀏覽器將不運行JavaScript。

所以這是一個跨瀏覽器支持類的事情。 「一流」是目前在JS2.0 [我相信一個包裝系統可有太多]

... 我也應該注意到,在IE中的setAttribute [非類的東西,因爲的setAttribute應該使用 - 能夠爲其他成員如「風格」]可能會出現問題。

相關問題