element.style

~~~javascript
document.getElementById($(1)).style.$(2) = $(3);
~~~

<div id="content1">デフォルトのテキスト1</div>
<div id="content2">デフォルトのテキスト2</div>


// 問題1. テキストの色を変更してください
// この下に解答してください
const contentElement1 = document.getElementById('content1')
contentElement1.style.color = '#ff0000'

// 問題2. テキストの大きさを変更しよう
// この下に解答してください
const contentElement2 = document.getElementById('content2')
contentElement2.style.fontSize = '24px'


// 問題1. テキストの色を変更してください
// この下に解答してください

// 問題2. テキストの大きさを変更しよう
// この下に解答してください


要素のスタイルを変更

document.getElementById()

element.textContent

~~~javascript
var element = $(1).getElementById($('2'));
element.textContent = $('3');
console.log(element.textContent);
~~~

要素のテキストを取得と変更

要素の可視性を切り替え

【演習】ボタンの色や形を変えよう

element.appendChild(element)

子要素に特定の要素を追加

createElement(tag_type)

子要素に段落を追加

element.remove()

特定の要素を削除

element.removeChild()

子要素を削除

【総合問題】強調されたリストを追加しよう

DOMに関する基本的な操作から応用まで、Webページの動的な構築や修正ができるようになるコースです。
手を動かしながらWeb開発の一歩を踏み出しましょう。

「JavaScript DOM操作を体験しよう」レッスンの総復習クイズです。