課題【DOM操作】ーNo.08
課題内容
- ＜概要＞
- divタグで「対象の文字列」という文字を設定しましょう。
- このdivタグには、idとして、「target-id」をつけましょう。
- また、このdivタグには、
- 「target-blue」というクラスを設定して、
- CSSファイルの中には、
- 背景を青色にするコードを書いておきましょう。
- javaScriptでは、
- idの「target-id」を指定してDOM操作を行い、
- クラス「target-blue」を削除しましょう。
- これで、背景色の青色がなくなるようにトライしましょう。
出力結果
コンソールには、
以下のように表示するようにしましょう。
------------------
文字列にクラスを追加
------------------
divタグからクラスを削除しました。ページの表示としては、
初期の表示として、
<div id="target-id" class="target-blue">対象の文字列</div>がHTMLとして準備しますが、
処理がすぐに動くので、
<div id="target-id">対象の文字列</div>とクラス名が削除され、
実際の表示も背景色には、
何も設定されていないという状態になれば、
うまく処理が動いています。
ポイント（DOM操作）
DOMの操作方法に関しては、
- パターン１：対象のタグを指定する場合
- パターン２：対象のクラスを指定する場合
- パターン３：対象のIDを指定する場合
の３パターンがあります。
この３パターンのそれぞれの指定方法は、
以下の記事の一部を参考にしてください。
ポイント（DOM操作でのクラスの削除）
DOMの操作として、
クラス名を追加する方法については、
以下のページを参考にしてください。
答え
HTML
<html>
<head>
<meta charset="UTF-8">
<!-- CSSファイル -->
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<!-- DOM操作 -->
<p>対象の文字列</p>
</body>
<script type="text/javascript" src="sample.js"></script>
</html>CSS
.target-blue {
background: blue;
}javaScript
// コンソールに表示
console.log('------------------');
console.log('文字列にクラスを削除');
console.log('------------------');
// DOMを取得する
let sample = document.querySelector('#target-id');
// 取得したDOMにクラスを削除
sample.classList.remove('target-blue');
// コンソールに表示
console.log('divタグからクラスを削除しました。');
初心者向けピックアップ
