HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのすべての要素にカスタムデータ属性を埋め込む方法

data-* 属性を使ったカスタムデータの埋め込み

HTMLのすべての要素にカスタムデータ属性を埋め込むには、data-* 属性を使用します。カスタムデータ属性の属性名には大文字を含めることができず、必ず「data-」という接頭辞を付けて定義する必要があります。

カスタムデータ属性を活用すると、HTML要素にJavaScriptからアクセスできる独自の情報を持たせられます。標準属性だけでは表現できない、ページ固有のデータを扱いたい場合に特に便利です。

コード例

<!DOCTYPE html>
<html>
   <head>
      <script>
         function display(rank) {
            var myRank = rank.getAttribute("data-rank-type");
            alert("Rank " + rank.innerHTML + " has " + myRank + " points.");
         }
      </script>
   </head>
   <body>
      <h1>Rank and Points</h1>
      <p>Click on any rank to generate the details.:</p>
      <ul>
         <li onclick = "display(this)" id = "fifth" data-rank-type = "500">Fifth</li>
         <li onclick = "display(this)" id = "sixth" data-rank-type = "600">Sixth</li>
      </ul>
   </body>
</html>

コードの解説

この例では、リスト項目（li要素）それぞれに「data-rank-type」というカスタムデータ属性を設定しています。各項目がクリックされると、onclickイベントによって display() 関数が呼び出され、getAttribute() メソッドを使って data-rank-type の値を取得し、その結果をアラートとして表示します。

カスタムデータ属性を定義する際のルール

  • 属性名はすべて小文字で記述する（大文字は使用不可）
  • 属性名は必ず「data-」で始める
  • 取得される値は常に文字列として扱われる

  1. 【初心者向け】HTMLのmin属性とmax属性の使い方をわかりやすく解説

    HTMLにおけるmin属性とmax属性とは？ HTMLのmin属性とmax属性は、要素が取り得る値の「最小値」と「最大値」を指定するための属性です。ユーザーが入力できる数値や日付の範囲を制限することで、不正な値の送信を防ぎ、より信頼性の高いフォームを作成できます。 これらの属性は、以下の3つの要素で使用することができます。 番号 要素名 使用できる属性 1 <input> min / max 2 <meter> min / max 3 <progress> min / max 各要素での役割の違い <input>要素の場

  2. PythonでHTMLテーブルのデータをCSVファイルに保存する方法【BeautifulSoup活用】

    課題：データ収集の難しさ データサイエンティストにとって最も苦労する作業のひとつが、データの収集です。ウェブ上には実際ところ豊富なデータが存在していますが、問題はそれをどう自動的に抽出・取得するかという点にあります。 はじめに 本記事では、tutorialspointのPythonチュートリアルページに埋め込まれているHTMLテーブル内のデータ（基本演算子の一覧など）を抽出し、CSVファイルとして保存する方法を解説します。 もしテーブルが1つだけなら、コピー＆ペーストでCSVファイルに貼り付けることも可能です。しかしながら、1つのページに5つ以上のテーブルが存在する場合、手作業での対応は非