element.setAttribute()

// 問題1. 入力欄にテキストを設定してください
// この下に解答してください
const inputElement = document.getElementById('input')
inputElement.setAttribute('value', 'テキスト')

// 問題2. 画像を表示させてください
const imgSrc =
  'http://drive.google.com/uc?export=view&id=1x4guhzvR90JjVkzKdXnkbk1qQLrJqr0z'
// この下に解答してください
const imgElement = document.getElementById('img')
imgElement.setAttribute('src', imgSrc)


input {
  height: 2.4em;
  width: 200px;
  padding: 0 16px;
  border-radius: 4px;
  border: none;
  box-shadow: 0 0 0 1px #ccc inset;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

input:focus {
  outline: 0;
  box-shadow: 0 0 0 2px rgb(33, 150, 243) inset;
  width: 200px;
}

img {
  display: block;
  margin-top: 20px;
  max-width: 100px;
}


// 問題1. 入力欄にテキストを設定してください
// この下に解答してください

// 問題2. 画像を表示させてください
const imgSrc =
  'http://drive.google.com/uc?export=view&id=1x4guhzvR90JjVkzKdXnkbk1qQLrJqr0z'
// この下に解答してください


属性の設定

element.getAttribute()

属性の取得

element.removeAttribute()

~~~html
<body>
  <button id="button">ボタン</button>
  <script>
    const button = document.getElementById('button')
    button.$(1)('id')
  </script>
</body>
~~~

属性の削除

クリックして画像を動的に変更

<input readonly>

属性の追加

【演習】属性を操作しよう

要素の属性操作の技術を身につけ、よりコントロールの細かいウェブページ制作ができるようになるコースです。
属性の追加や変更を自在に操ります。

webサイトに動きをつけたり、表示内容を切り替えたり、formの入力を制御するなど様々な処理について学んでいきます

JavaScript DOM操作コース

【基礎を学ぼう🔰】はじめて学ぶDOM操作入門

「要素の属性を自由自在に操ろう」レッスンの総復習クイズです。