課題【DOM操作】ーNo.07
課題内容
- ＜概要＞
- pタグで「対象の文字列」という文字を設定しましょう。
- このpタグにクラス「text-red」をつけましょう。
- クラス「text-red」は、
- CSSファイルの中に準備しておきましょう。
- クラス「text-red」をpタグに追加するのは、
- javaScriptのDOM操作として追加しましょう。
出力結果
コンソールには、
以下のように表示するようにしましょう。
------------------
文字列にクラスを追加
------------------
pタグにクラスを追加しました。ページの表示としては、
初期の表示として、
<p>対象の文字列</p>がHTMLとして準備しますが、
処理がすぐに動くので、
<p class="text-red ">対象の文字列</p>とクラス名が追加され、
実際の表示も文字が赤色になっていれば、
うまく処理が動いています。
ポイント（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
.text-red {
color: red;
}javaScript
// コンソールに表示
console.log('------------------');
console.log('文字列にクラスを追加');
console.log('------------------');
// DOMを取得する
let sample = document.querySelector('p');
// 取得したDOMにクラスを追加
sample.classList.add('text-red');
// コンソールに表示
console.log('pタグにクラスを追加しました。');
初心者向けピックアップ
