DOM要素の属性を使用します

DOM要素属性を操作するのは難しい場合があります。この記事では、 el DOM要素であると仮定して、JavaScriptの属性値を設定および取得するためのさまざまな方法について説明します（例： document.querySelectorで取得）。

一部の属性は、DOMオブジェクトのプロパティとして直接アクセス可能です。たとえば、 onclickのようなid 、 title 、 lang 、 align 、およびイベント属性を簡単に設定および取得できます。

 el.id; // "いいね"
el.title = "my title";
el.title; //「私のタイトル」;

style属性は似ていますが、そのプロパティはネストされています。

 el.style.color = "red";
el.style.backgroundcolor = "black";

（インラインスタイルだけでなく）計算スタイルを取得するには、 window.getComputedStyleを使用します。

 let 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（ "module"）; // 真実

classListアレイのように動作し、 forEachなどの方法を可能にします。

data-*属性の場合、 datasetプロパティは、よりユーザーフレンドリーなインターフェイスを提供します。

 el.dataset;
/*
{
  アクティブ：「真」、
  配置：「右上」
}
*/

el.dataset.active; // "真実"
el.dataset.extrawords; // "HI"（メモcamelcase変換）
el.dataset.active = "false"; // setter

この概要は、DOM属性と対話する多様な方法を示しており、効率的かつ正しい操作のための各アプローチのニュアンスを理解することの重要性を強調しています。

以上がDOM要素の属性を使用しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。