setAttribute（W3C DOM CORE方法）

返回

void

throws

invalid_character_err，no_modification_allowed_err

鑰匙要點

JavaScript中的setAttribute方法
• 允許開發人員在HTML元素中添加，更改或更新屬性及其值。它是文檔對像模型（DOM）的一部分，它採用兩個參數：屬性名稱及其值。
• setAttribute方法對病例敏感，可用於修改CSS樣式和自定義數據屬性。但是，對於事件處理程序，建議使用AddEventListener方法而不是setAttribute。
在使用setAttribute中使用駱駝的名稱時要小心，因為這可能會導致不同的瀏覽器中的不一致。另外，當設置值時，該值不會解析，這意味著任何實體參考或其他標記都將被視為字面文本。

>示例

element.setAttribute('rel', 'me');

上面的示例在元素上設置了帶有值me的rel屬性。

因此

然後上面的操作將導致以下內容：

<a href="http://www.brothercake.com/">brothercake</a>

參數

<a href="http://www.brothercake.com/" rel="me">brothercake</a>

名稱

（DOMSTRING） 必需的

>屬性的名稱 創建或更改。

value

（domstring） 必需的

>>的字符串值 屬性。

描述

>為此元素設置帶有指定名稱和值的新屬性。

如果已經存在指定名稱的屬性，則更換其值。

設置值時，該值不會解析，因此任何實體參考或其他標記都將被視為字面文本。為了創建一個包含實體的屬性，規范建議創建一個帶有適當文本和EntityRereference節點的屬性節點，然後使用setAttributenode將其添加到元素中，但是實際上，這種很少有效（有關詳細信息，請參見attr ）。

此方法用於使用非命名置屬性；要添加名稱屬性屬性，請改用DOM 2 setAttributens方法。

>

>

請小心駱駝級的屬性名稱

>

>您應該在所有瀏覽器的代碼中使用駱駝的名稱，因為在XHTML模式下的Opera中，設置帶有駱駝名稱的屬性可能會影響其相應的DOM屬性。例如，如果將一個稱為TabIndex的屬性設置為任何值，它將具有將Tabindex屬性重置為0（其默認值），完全刪除原始Tabindex屬性的效果指定的字符串值。

這種行為可能歸結為在XHTML模式下如何處理病例敏感性的不一致性。在其他瀏覽器（Firefox和Safari）中，執行此操作將創建一個名為TabIndex的新屬性，而將原始的Tabindex屬性及其相應的Tabindex屬性保持不變。

此註釋僅適用於XHTML模式下的這些瀏覽器 - 在HTML模式中，名稱參數是對案例不敏感的，因此Tabindex被視為Tabindex。

>此外，IE中的IE無法設置輸入元素的類型屬性 - 嘗試這樣做會引發錯誤（不支持此命令）。它也無法設置樣式屬性（這樣做根本沒有效果），也不能將事件處理屬性設置為字符串（這樣做沒有效果，除非該元素已經具有相同名稱的事件處理屬性，否則在這種情況下，設置新操作將刪除舊的操作，但什麼也沒留下- 儘管getAttribute隨後會返回設置的字符串值，但實際上不會在元素上有一個活動的事件處理程序）。但是，如果將函數作為值參數傳遞，而不是字符串：

>，則可以設置事件處理屬性。

最後，如果使用此方法設置圖像的SRC屬性，則隨後從getAttribute返回的值將是完全合格的URI；當檢索靜態HTML設置的SRC時，這與其行為相同。但是，在設置鏈接的HREF時，隨後返回的值將是設置的字面價值。這與靜態HTML的行為不同，其中該值被返回為合格的URI。

>

我怎麼知道它是否有效？

element.setAttribute('rel', 'me');

>

確定此方法是否按預期工作特別困難，因為可以完全設置任何名稱的屬性，儘管這可能不是您期望的屬性。例如，在Internet Explorer中，您仍然可以設置一個稱為類的屬性，然後使用getAttribute（'class'）檢索它，但它不會與className屬性相對應- 它將是一個完全獨立的屬性，對視覺上的差異沒有任何視覺上的差異。元素。

在所有瀏覽器中，

在所有評估布爾值（例如殘疾人）評估的屬性只能設置為true - 將其設置為false沒有效果。這是正確的行為，是因為此類屬性應只有一個可能的值（即禁用=“禁用”），或者未定義（因此應使用removeatTribute進行否定）。在Opera 9.5中，Firefox和Safari屬性值隨後將作為false返回，但該元素仍將被禁用，在Opera 9.0中，該值將繼續返回作為殘疾人，並且在Internet Explorer中，該值將繼續返回為Boolean true；這些是對元素狀態的準確反思，即使它們有些混亂！但是，由於IE認為這些屬性具有實際的布爾值，因此可以通過將其設置為布爾而不是字符串來切換該值（以及相應地禁用和啟用的元素）：

>

element.setAttribute('rel', 'me');

Internet Explorer實現了第二個參數，這是一個可以將值0（不敏感）或1（默認為case敏感）的情況敏感性標誌。該論點在IE中的預期工作，並且不會影響任何其他瀏覽器。

>

經常詢問有關setAttribute w3c dom core方法

的問題

> JavaScript中的setAttribute方法是什麼？此方法用於在HTML元素中添加，更改或更新屬性及其值。它採用兩個參數：屬性名稱及其值。例如，如果要更改文本的顏色，則可以使用setAttribute修改元素的樣式屬性。

setAttribute與getAttribute有何不同？為了添加或更改屬性的值，使用getAttribute來檢索屬性的值。兩者都是DOM中元素接口的方法。它們共同努力，使開發人員可以與HTML元素進行交互和操縱。

>我可以使用setAttribute修改CSS樣式嗎？該方法可以更改包含CSS屬性的HTML元素的樣式屬性。但是，重要的是要注意，使用setAttribute將覆蓋任何現有的內聯樣式。如果要更改特定的樣式屬性而不影響他人，則最好使用元素的樣式屬性。

>

如果屬性不存在，會發生什麼？存在，setAttribute方法將用指定的值創建它。這是setAttribute如此強大的原因之一：它允許開發人員動態添加屬性到HTML元素。

>

>我可以將setAttribute與自定義數據屬性一起使用嗎？當您需要存儲沒有任何視覺表示的額外信息時，這一點特別有用。只需記住將屬性名稱帶有“ data-”以符合HTML5標準。這意味著“班級”和“班級”將被視為兩個不同的屬性。始終確保使用屬性時使用正確的情況。

>我可以使用setAttribute添加事件處理程序嗎？

>

>

在技術上可以使用setAttribute添加事件處理程序，但不推薦使用。這是因為事件屬性的值始終是字符串，這意味著您無法將函數直接分配為事件處理程序。取而代之的是，使用AddEventListener方法，該方法是專門為此目的設計的。

> setAttribute是否可以與所有HTML元素一起使用嗎？

是的，setAttribute可與所有HTML元素一起使用。但是，並非所有屬性都適用於所有元素。例如，“ src”屬性與“ img”元素相關，而與“ p”元素無關。

>

> setAttribute的一些常見用例？動態更改HTML元素的外觀或行為。例如，您可以使用它來更改文本的顏色，向圖像添加邊框或更改圖像的來源。它也用於添加自定義數據屬性。

是否有setAttribute的替代方法？例如，您可以直接修改HTML元素的屬性。這通常比使用SetAttribute更簡單，更直觀。但是，setAttribute具有能夠使用任何屬性（包括自定義數據屬性）的優勢。

。

以上是setAttribute（W3C DOM CORE方法）的詳細內容。更多資訊請關注PHP中文網其他相關文章！