カテゴリー: DOM操作

課題内容 ＜準備：HTML＞ 　divタグで「対象の文字列」という文字を設定しましょう。 　このdivタグには、idとして、「target-id」をつけましょう。 　 ＜準備：CSS＞ 　色をつけるためのクラスを用意しましょう。 　文字列を赤色、背景を黄色：クラス「change-red」 　文字列を青色、背景を黄色：クラス「change-blue」 　文字列を緑色、背景を黄色：クラス「change…

さらに表示 課題【DOM操作】ーNo.09

課題内容 ＜概要＞ 　divタグで「対象の文字列」という文字を設定しましょう。 　このdivタグには、idとして、「target-id」をつけましょう。 　また、このdivタグには、 　「target-blue」というクラスを設定して、 　CSSファイルの中には、 　背景を青色にするコードを書いておきましょう。 　javaScriptでは、 　idの「target-id」を指定してDOM操作を行い…

さらに表示 課題【DOM操作】ーNo.08

課題内容 ＜概要＞ 　pタグで「対象の文字列」という文字を設定しましょう。 　このpタグにクラス「text-red」をつけましょう。 　クラス「text-red」は、 　CSSファイルの中に準備しておきましょう。 　クラス「text-red」をpタグに追加するのは、 　javaScriptのDOM操作として追加しましょう。 　　 出力結果 コンソールには、 以下のように表示するようにしましょう。 …

さらに表示 課題【DOM操作】ーNo.07

課題内容 ＜概要＞ 　divタグで「初期の文字列」という文字を設定しましょう。 　このdivタグのIDに「change-id」をつけましょう。 　このdivタグの文字列を「クラス名」を指定して、 　DOM操作として取得しましょう。 　取得した値はコンソールに表示しましょう。 　その後にこのdivタグの文字列として、 　「書き換えた文字列です」 　と文字列を書き換えましょう。 　文字列を書き換えた後…

さらに表示 課題【DOM操作】ーNo.06

課題内容 ＜概要＞ 　divタグで「初期の文字列」という文字を設定しましょう。 　このdivタグのクラス名に「change-class」をつけましょう。 　このdivタグの文字列を「クラス名」を指定して、 　DOM操作として取得しましょう。 　取得した値はコンソールに表示しましょう。 　その後にこのdivタグの文字列として、 　「書き換えた文字列です」 　と文字列を書き換えましょう。 　文字列を書…

さらに表示 課題【DOM操作】ーNo.05

課題内容 ＜概要＞ 　pタグで「初期の文字列」という文字を設定しましょう。 　このpタグの文字列をDOM操作として取得しましょう。 　取得した値はコンソールに表示しましょう。 　その後にこのpタグの文字列として、 　「書き換えた文字列です」 　と文字列を書き換えましょう。 　文字列を書き換えた後に、もう１度、 　このpタグの文字列をDOM操作として取得しましょう。 　取得した値はコンソールに表示し…

さらに表示 課題【DOM操作】ーNo.04

課題内容 ＜概要＞ 　divタグで「テストの値です」という文字を設定しましょう。 　このdivタグの「ID」として「test」というクラス名をつけましょう。 　この「test」という「ID」の文字列をDOM操作として取得しましょう。 　取得した値はコンソールに表示しましょう。 　　 出力結果 コンソールには、 以下のように表示されます。 ポイント（DOM操作） DOMの操作方法に関しては、 パター…

さらに表示 課題【DOM操作】ーNo.03

課題内容 ＜概要＞ 　divタグで「テストの値です」という文字を設定しましょう。 　このdivタグのクラス名として「test」というクラス名をつけましょう。 　この「test」というクラス名の文字列をDOM操作として取得しましょう。 　取得した値はコンソールに表示しましょう。 　　 出力結果 コンソールには、 以下のように表示されます。 ポイント（DOM操作） DOMの操作方法に関しては、 パター…

さらに表示 課題【DOM操作】ーNo.02

課題内容 ＜概要＞ 　pタグで「テストの値です」という文字を設定しましょう。 　このpタグの文字列をDOM操作として取得しましょう。 　取得した値はコンソールに表示しましょう。 　　 出力結果 コンソールには、 以下のように表示されます。 ポイント（DOM操作） DOMの操作方法に関しては、 パターン１：対象のタグを指定する場合 パターン２：対象のクラスを指定する場合 パターン３：対象のIDを指定…

さらに表示 課題【DOM操作】ーNo.01