JavaScript初心者も楽々！属性追加・取得の方法10選

var element = document.getElementById("example");
element.setAttribute("class", "example-class");

// HTML要素をIDで取得
var element = document.getElementById("example");

// data属性を追加し、値を"custom-data"に設定
element.setAttribute("data-custom", "custom-data");

// HTML要素をIDで取得
var element = document.getElementById("example");

// "class"属性の値を取得
var attributeValue = element.getAttribute("class");

// 値をコンソールに出力
console.log(attributeValue);

// HTML要素をIDで取得
var element = document.getElementById("example");

// "class"属性を削除
element.removeAttribute("class");

// HTML要素をIDで取得
var element = document.getElementById("example");

// "class"属性の値を変更
element.setAttribute("class", "new-class");

// 画像要素をIDで取得
var imgElement = document.getElementById("example-image");

// 画像切り替え用関数
function changeImage(newImageSrc) {
  imgElement.setAttribute("src", newImageSrc);
}

// 画像を切り替える
changeImage("path/to/new-image.jpg");

// タブ切り替え用関数
function switchTab(tabId) {
  // 全てのタブコンテンツを非表示にする
  var tabContents = document.querySelectorAll(".tab-content");
  for (var i = 0; i < tabContents.length; i++) {
    tabContents[i].style.display = "none";
  }

  // 指定したタブコンテンツを表示する
  document.getElementById(tabId).style.display = "block";
}

// アコーディオンメニューのトグル用関数
function toggleAccordion(accordionId) {
  // 指定したアコーディオンコンテンツを取得
  var accordionContent = document.getElementById(accordionId);

  // コンテンツの表示状態を切り替える
  if (accordionContent.style.display === "none") {
    accordionContent.style.display = "block";
  } else {
    accordionContent.style.display = "none";
  }
}

// カスタムチェックボックスのトグル用関数
function toggleCustomCheckbox(checkboxId) {
  // 指定したチェックボックス要素を取得
  var checkbox = document.getElementById(checkboxId);

  // チェック状態を反転させる
  checkbox.checked = !checkbox.checked;
}

// 入力フォームのバリデーション用関数
function validateForm() {
  // 入力フォームの要素を取得
  var inputElement = document.getElementById("input-form");

  // 入力値が空でないかチェック
  if (inputElement.value === "") {
    alert("入力が必要です。");
    return false;
  }

  // 入力値の長さが適切かチェック
  if (inputElement.value.length < 5 || inputElement.value.length > 20) {
    alert("入力は5文字以上、20文字以下でお願いします。");
    return false;
  }

  // バリデーションが成功した場合
  return true;
}