このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

【JavaScript入門】要素の属性を操作するプロパティ

要素の属性を操作するプロパティ

　HTML 要素は「タグそのもの」「テキスト」「属性」の 3 層で成り立っています。DOM から取得した Element は 属性（style・id・class など）を直接プロパティ経由で読み書き でき、画面に即座に反映されます。ここでは属性操作に使う主要プロパティを整理し、最も頻繁に利用する .style を中心に実践例を示します。

１．代表的な属性プロパティと役割

プロパティ読み取り書き込み備考
.styleインライン style オブジェクトel.style.color = 'red'ケバブケースは キャメルケース (textAlign)
.tagNameタグ名（大文字）－読み取り専用
.idid 値el.id = 'newId'一意識別子
.classNameclass 値（文字列）el.className = 'a b'複数クラスは空白区切り（操作は .classList 推奨）

1.1. .classList の主メソッド

メソッド機能
add(name) / remove(name)クラスの追加 / 削除
toggle(name)有無をトグル
contains(name)含まれるか判定

２．スタイル操作のコツ

2.1. ケバブケース → キャメルケース変換

background-color → style.backgroundColor、font-size → style.fontSize のようにハイフンを削除し後半を大文字に。

  • ケバブケース
    ケバブケースは、単語同士をハイフン（-）でつなぎ、すべて小文字で記述する命名規則です。たとえば、background-color や font-size などです。
  • キャメルケース
    キャメルケースでは、最初の単語はすべて小文字で、2単語目以降の最初の文字を大文字にする書き方です。たとえば、backgroundColor や fontSize などがあります。JavaScriptでDOMのstyleプロパティにCSSスタイルを適用する際、このキャメルケースが利用されます。

2.2. 数値には単位を忘れずに

el.style.width = '200px';   // OK
el.style.opacity = 0.5;     // 数値のみで可

３．デモ ― プロパティ操作でメニューを書き換え

ファイル名： attr_property_demo.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>要素の属性を操作するプロパティ</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
body{font-family:sans-serif;margin:2rem}
li{margin:.3rem 0}
</style>
</head>
<body>
<h2>☕ 本日のメニュー</h2>

<ul id="menu" class="list menuList">
  <li class="item">ホットコーヒー</li>
  <li class="item">アイスコーヒー</li>
  <li class="item">チーズケーキ</li>
</ul>

<button id="styleBtn">1行目を右寄せ＆赤文字</button>
<button id="infoBtn">UL の属性情報を表示</button>

<pre id="log"></pre>

<script>
/* ---------- 要素取得 ---------- */
const firstItem = document.querySelector('.item');
const ul        = document.getElementById('menu');
const log       = txt => document.getElementById('log').textContent = txt;

/* ---------- 1. style を変更 ---------- */
document.getElementById('styleBtn').onclick = () => {
  firstItem.style.textAlign = 'right';  // キャメルケース
  firstItem.style.color     = 'red';
  firstItem.classList.add('highlight'); // classList も操作
  log('.style を書き換えました');
};

/* ---------- 2. 属性値を取得して表示 ---------- */
document.getElementById('infoBtn').onclick = () => {
  const info = `
tagName   : ${ul.tagName}
id        : ${ul.id}
className : ${ul.className}
style.cssText : ${ul.style.cssText || '(空)'}
`;
  log(info.trim());
};
</script>
</body>
</html>

期待される挙動

  1. [1行目を右寄せ＆赤文字] をクリック
    ・.style.textAlign と .style.color が更新され、1 行目が右寄せ＋赤に変化。
    ・.classList.add() で highlight クラスが付与（CSS 未定義なので見た目は変わらない）。
  2. [UL の属性情報を表示] をクリック
    ・tagName は UL、id は menu、className は list menuList がログに表示。

ブラウザの出力例

コードポイント

行内容
22.textAlign—CSS text-align をキャメルケース化
25.classList.add('highlight')—クラス操作は className 直書きより安全
30–34tagName, id, className, style.cssText を読み取り

まとめ

  • スタイル変更は element.style.<prop>、複数クラスの切替は element.classList。
  • tagName は読み取り専用、id と className は文字列で読み書きできる。
  • CSS プロパティ名にハイフンがある場合は キャメルケース に変換してアクセス。

　これらの基本プロパティを押さえておけば、ライブラリを使わなくても純粋な JavaScript だけでダイナミックな UI 変更が行えます。