DOM屬性訪問：爲什麼「elt.class」不起作用？

我有這樣的javascript代碼：DOM屬性訪問：爲什麼「elt.class」不起作用？

var elt = document.createElement("div"); 
elt.class = "class_1";

有應該是在我的CSS .class_1關聯的造型，但它並沒有真正適用的某些原因。花了幾個小時後，搞清楚什麼地方出錯了，我想這個選擇：

elt.setAttribute("class", "class_1");

和它的工作....

這是因爲在我的代碼的另一部分怪異，我用elt.id和它工作得很好。起初我以爲這是一個跨瀏覽器的問題，但事實證明，"elt.class"不適用於所有瀏覽器。

這是在本地JavaScript DOM的錯誤嗎？有人可以解釋爲什麼這是或者如果我做錯了什麼？謝謝。所有的輸入/答案將不勝感激。

來源

2011-07-12 Benny Tjia

屬性和屬性是不同的東西。屬性是在文檔代碼中看到的字符串，對於任何類型的文檔訪問通過DOM Core method getAttribute：

<a id="foo" href="bar" tabindex="1" onclick="alert()" class="bof" potato="lemon"> 

a.getAttribute('id')   // string "foo" 
a.getAttribute('href')  // string "bar" 
a.getAttribute('tabindex') // string "1" 
a.getAttribute('onclick') // string "alert()" 
a.getAttribute('class')  // string "bof" 
a.getAttribute('potato')  // string "lemon"

，而屬性，直接訪問的對象，是專門和文件類型特定的（例如，在定義DOM HTML或HTML5）並且通常是更可讀的便利設施。雖然他們經常反映與屬性相同的內容，但它們在名稱，價值，類型或用途方面可能會有所不同。

a.id       // string "foo" 
a.href      // string "http://www.example.com/base/bar" 
a.tabIndex     // integer 1 
a.onclick     // function() { alert(); } 
a.className     // string "bof" 
a.potato      // undefined

因此，雖然id產生相同的值，href和所有其他URL屬性獲取相對於文檔absolutised; tabIndex和其他數字屬性返回一個數字而不是文字字符串; onclick和其他事件處理函數屬性返回一個JS函數對象，並且名稱恰好與普通保留字衝突的屬性（如class（不僅僅是JavaScript保留字，因爲DOM是跨語言標準）會被重命名（另請參閱：htmlFor），非標準屬性根本不可訪問。其他陷阱：value/selected/checked上輸入反映當前表單字段的內容;同名的屬性是初始值。 [旁白：IE < 8在講述屬性和屬性之間的區別時遇到了麻煩，並且在所有情況下都會返回錯誤信息getAttribute。不要讓這讓你感到困惑，並且爲此避免使用getAttribute來訪問HTML DOM屬性。]

來源

2011-07-12 20:58:20 bobince

「類」是在JavaScript的保留字，所以DOM使用className以反映該元素的當前類（ES）。這是以字符串形式表示的。例如："foo bar baz"（具有類foo，bar的元素，並且baz）

對於如何使用它的示例見https://developer.mozilla.org/en/DOM/element.className。

來源

2011-07-12 20:35:27 Zach

哇謝謝..我確實知道這一點。我覺得很愚蠢 –

var elt = document.createElement("div"); 
elt.className = "class_1";

來源

2011-07-12 20:35:44 Shaz

類是保留字。要使用className訪問類屬性。 elt.className = "class_1";

來源

2011-07-12 20:35:56 scrappedcola

DOM屬性訪問：爲什麼「elt.class」不起作用？

回答

相關問題