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

JavaScriptでHTML属性の値を変更する方法【初心者向けサンプルコード付き】

JavaScriptでHTML要素の属性（attribute）の値を変更するには、まずgetElementById()などのメソッドで対象の要素を取得し、その属性プロパティに新しい値を代入します。あるいは、setAttribute()メソッドを使う方法もあります。

基本的なサンプルコード

次の例では、画像要素のwidth属性の値を「200」から「250」に変更しています。

<!DOCTYPE html>
<html>
   <body>
      <img id="HTML5" src="https://www.tutorialspoint.com/html5/images/html5-mini-logo.jpg" width="200" height="150">
      <script>
         document.getElementById("HTML5").width = "250";
      </script>
      <p>画像のwidth属性が更新されました</p>
   </body>
</html>

このコードを実行すると、ページが読み込まれたタイミングでスクリプトが実行され、画像の表示幅が自動的に250pxへと更新されます。ブラウザの開発者ツールでDOMを確認すると、実際に属性値が書き換わっていることがわかります。

setAttribute()メソッドを使う方法

任意の属性名と値を指定して変更したい場合は、setAttribute()メソッドが便利です。

document.getElementById("HTML5").setAttribute("width", "300");

第一引数に属性名、第二引数に設定したい値を渡すだけで、既存の属性を上書きしたり、存在しない属性を新しく追加したりすることもできます。

現在の属性値を取得するには

getAttribute()メソッドを使えば、要素が持つ現在の属性値を読み取ることができます。

const currentWidth = document.getElementById("HTML5").getAttribute("width");
console.log(currentWidth); // "250"

これらのメソッドを組み合わせることで、ボタンのクリックに応じて画像を切り替えたり、フォームの入力値に合わせて表示を動的に変えたりといったインタラクティブな処理を簡単に実装できます。

  1. JavaScriptでテキストボックスに値を出力する方法をわかりやすく解説

    JavaScriptでテキストボックスに値を出力したい場合は、input要素が持つvalueプロパティを利用します。ユーザーが入力した値を取得し、処理結果を別のテキストボックスのvalueに代入することで、画面への出力が可能になります。 ここでは、2つの数値を入力してその合計を表示するシンプルなサンプルを紹介します。 サンプルコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewp

  2. JavaScriptでテキストボックスの入力値を取得して表示する方法

    JavaScriptでは、valueプロパティを使ってテキストボックスに入力された値を取得し、innerHTMLを使うことでその値を段落（<p>要素）に表示することができます。この仕組みは、フォームの入力内容をリアルタイムに画面へ反映させたい場合などによく使われる基本的なテクニックです。 コード例 以下が実際のサンプルコードです。 <!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8">