<input id="input" type="text" value="テキスト" />
<div>
  <button id="button" type="button">ボタン</button>
</div>
<div>
  <button id="remove-disabled" type="button">ボタンの無効化を解除</button>
</div>


const inputElement = document.getElementById('input')
// 問題1. 入力欄を読み取り専用に設定してください
// この下に回答を記述してください
inputElement.setAttribute('readonly', true)

const buttonElement = document.getElementById('button')
// 問題2. ボタンを無効化してください
// この下に回答を記述してください
buttonElement.setAttribute('disabled', true)

const removeDisabledElement = document.getElementById('remove-disabled')
removeDisabledElement.addEventListener('click', () => {
  // 問題3. ボタンの無効化を解除してください
  // この下に回答を記述してください
  buttonElement.disabled = false
})


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

button {
  color: #fff;
  background-color: #eb6100;
  border: none;
  border-bottom: 5px solid #b84c00;
  padding: 8px 20px;
  border-radius: 8px;
  font-weight: bold;
}

button:hover {
  margin-top: 3px;
  background: #f56500;
  border-bottom: 2px solid #b84c00;
}


<input readonly>

const inputElement = document.getElementById('input')
// 問題1. 入力欄を読み取り専用に設定してください
// この下に回答を記述してください

const buttonElement = document.getElementById('button')
// 問題2. ボタンを無効化してください
// この下に回答を記述してください

const removeDisabledElement = document.getElementById('remove-disabled')
removeDisabledElement.addEventListener('click', () => {
  // 問題3. ボタンの無効化を解除してください
  // この下に回答を記述してください
})


属性の追加

element.getAttribute()

属性の取得

element.setAttribute()

属性の設定

element.removeAttribute()

属性の削除

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

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

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

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

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

属性の追加

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