// 問題1. 入力欄のテキストを取得してください
// この下に回答を記述してください
const inputElement = document.getElementById('input')
console.log(inputElement.getAttribute('value'))

// 問題2. 画像のパス情報を取得してください
// この下に回答を記述してください
const imgElement = document.getElementById('img')
console.log(imgElement.getAttribute('src'))


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;
}


element.getAttribute()

// 問題1. 入力欄のテキストを取得してください
// この下に回答を記述してください

// 問題2. 画像のパス情報を取得してください
// この下に回答を記述してください


属性の取得

element.setAttribute()

属性の設定

element.removeAttribute()

属性の削除

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

<input readonly>

属性の追加

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

要素の属性を自由自在に操ろう

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

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

属性の取得

まずは必要なスキルを確認しましょう！