在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中文网其他相关文章！