HTMLのdata属性をマスター！使い方・カスタマイズ方法10選

<button data-action="save">保存</button>
<button data-action="delete">削除</button>

<button id="exampleButton" data-example="customData">ボタン</button>

<script>
  const button = document.getElementById('exampleButton');
  const customData = button.dataset.example;
  console.log(customData); // "customData"が出力されます
</script>

<button id="exampleButton">ボタン</button>

<script>
  const button = document.getElementById('exampleButton');
  button.dataset.example = "newCustomData";
  console.log(button.dataset.example); // "newCustomData"が出力されます
</script>

<ul>
  <li data-tab="tab1" class="active">タブ1</li>
  <li data-tab="tab2">タブ2</li>
  <li data-tab="tab3">タブ3</li>
</ul>
<div data-content="tab1">タブ1の内容</div>
<div data-content="tab2" style="display:none;">タブ2の内容</div>
<div data-content="tab3" style="display:none;">タブ3の内容</div>

<script>
  const tabs = document.querySelectorAll('[data-tab]');
  const contents = document.querySelectorAll('[data-content]');

  tabs.forEach(tab => {
    tab.addEventListener('click', () => {
      tabs.forEach(t => t.classList.remove('active'));
      tab.classList.add('active');

      contents.forEach(content => {
        content.style.display = content.dataset.content === tab.dataset.tab ? 'block' : 'none';
      });
    });
  });
</script>

<div class="bar" data-value="30">30%</div>
<div class="bar" data-value="60">60%</div>
<div class="bar" data-value="90">90%</div>

<script>
  const bars = document.querySelectorAll('.bar');

  bars.forEach(bar => {
    const value = bar.dataset.value;
    bar.style.width = `${value}%`;
  });
</script>

<button id="sortButton">並び替え</button>
<ul id="list">
  <li data-value="3">項目3</li>
  <li data-value="1">項目1</li>
  <li data-value="2">項目2</li>
</ul>

<script>
  const sortButton = document.getElementById('sortButton');
  const list = document.getElementById('list');

  sortButton.addEventListener('click', () => {
    const sortedItems = Array.from(list.children).sort((a, b) => {
      return parseInt(a.dataset.value) - parseInt(b.dataset.value);
    });

    list.innerHTML = '';
    sortedItems.forEach(item => list.appendChild(item));
  });
</script>

<div id="slider">
  <div class="slide" data-index="1">スライド1</div>
  <div class="slide" data-index="2">スライド2</div>
  <div class="slide" data-index="3">スライド3</div>
</div>
<button id="prevButton">前へ</button>
<button id="nextButton">次へ</button>

<script>
  const slider = document.getElementById('slider');
  const slides = slider.querySelectorAll('.slide');
  const prevButton = document.getElementById('prevButton');
  const nextButton = document.getElementById('nextButton');
  let currentIndex = 1;

  const updateSlides = () => {
    slides.forEach(slide => {
      slide.style.display = slide.dataset.index == currentIndex ? 'block' : 'none';
    });
  };

  prevButton.addEventListener('click', () => {
    currentIndex = currentIndex - 1 <= 0 ? slides.length : currentIndex - 1;
    updateSlides();
  });

  nextButton.addEventListener('click', () => {
    currentIndex = currentIndex + 1 > slides.length ? 1 : currentIndex + 1;
    updateSlides();
  });

  updateSlides();
</script>

<select id="filter">
  <option value="all">すべて</option>
  <option value="fruits">果物</option>
  <option value="vegetables">野菜</option>
</select>
<ul id="list">
  <li data-category="fruits">りんご</li>
  <li data-category="fruits">みかん</li>
  <li data-category="vegetables">キャベツ</li>
  <li data-category="vegetables">トマト</li>
</ul>

<script>
  const filter = document.getElementById('filter');
  const list = document.getElementById('list');
  const items = list.querySelectorAll('li');

  filter.addEventListener('change', () => {
    const selectedCategory = filter.value;
    items.forEach(item => {
      item.style.display = selectedCategory === 'all' || item.dataset.category === selectedCategory ? 'block' : 'none';
    });
  });
</script>

<div id="rating">
  <span data-rate="1">★</span>
  <span data-rate="2">★</span>
  <span data-rate="3">★</span>
  <span data-rate="4">★</span>
  <span data-rate="5">★</span>
</div>

<script>
  const rating = document.getElementById('rating');
  const stars = rating.querySelectorAll('span');

  stars.forEach(star => {
    star.addEventListener('click', () => {
      const rate = star.dataset.rate;

      stars.forEach(s => {
        s.style.color = s.dataset.rate <= rate ? 'orange' : 'gray';
      });
    });
  });
</script>

<button data-action="open">開く</button>
<button data-action="save">保存</button>
<button data-action="close">閉じる</button>

<script>
  const buttons = document.querySelectorAll('button');

  buttons.forEach(button => {
    button.addEventListener('click', () => {
      const action = button.dataset.action;

      switch (action) {
        case 'open':
          console.log('ファイルを開きます');
          break;
        case 'save':
          console.log('ファイルを保存します');
          break;
        case 'close':
          console.log('ファイルを閉じます');
          break;
      }
    });
  });
</script>