在DOM元素上使用屬性

操縱DOM元素屬性可能很棘手。本文探討了在JavaScript中設置和檢索屬性值的各種方法，假設el是DOM元素（例如，通過document.querySelector獲得）。

某些屬性可直接作為DOM對象的屬性訪問。例如，可以簡單地設置和檢索id ， title ， lang ， align和Event屬性（例如onclick ：

 el.id; // “涼爽的”
el.title =“我的標題”;
el.title; //“我的標題”；

style屬性相似，但其屬性是嵌套的：

 el.style.color =“ red”;
el.style.backgroundColor =“ black”;

要獲得計算的樣式（而不是僅僅是內聯樣式），請使用window.getComputedStyle ：

令style = window.getComputedStyle（el）;
style.Color; //計算的CSS顏色

但是，並非所有屬性都是一流的公民。對於諸如aria-hidden類的屬性，您必須使用setAttribute和getAttribute ：

 El.setAttribute（“ Aria-Hidden”，true）;
El.GetAttribute（“ Aria-Hidden”）;

某些屬性提供專門的助手API。 classList提供了用於管理類屬性的方便方法：

 el.Classlist.Value; //“模塊大”
el.ClassList.Length; // 2
el.Classlist.Add（“ Cool”）; //“模塊大酷”
el.Classlist.Remove（“ Big”）; //“模塊酷”
el.Classlist.Toggle（“ big”）; //切換“大”
el.Classlist.Contains（“模塊”）; // 真的

classList甚至表現得像數組一樣，允許諸如forEach類的方法。

對於data-*屬性， dataset屬性提供了一個更具用戶友好的接口：

 El.Dataset;
/*
{
  活躍：“ true”，
  位置：“右上角”
}
*/

el.dataset.active; // “真的”
el.dataset.extrawords; //“ hi”（注意駱駝轉換）
el.dataset.active =“ false”; // setter

該概述展示了與DOM屬性相互作用的多種方法，突出了理解每種方法對高效和正確操作的細微差別的重要性。

以上是在DOM元素上使用屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！