目的
- class 名を設定して CSS を切り替えたい。
- 長めの CSS を一度に適用したい。
- class 名を “” にして CSS を解除したい。
- className を使用する。
テストしてみました。
(さらに…)タグ: getElementById
JavaScript で HTML の中の指定 ID を持った要素を取得したい場合は、「
getElementById」メソッドで可能なようです。
-
class 名を設定して CSS を切り替える JavaScript のテスト。
-
div , p などのタグに直接書くタイプの CSS を JavaScript で変更するテスト（ setAttribute メソッド編）。
目的
- インラインの CSS を変更したい。
- <style> の中に書く通常の書式。
- 一行で複数の CSS を設定したい。
- setAttribute メソッドで変更したい。
テストしてみました。
インラインのスタイルシート。 -
div , p などのタグに直接書くタイプの CSS を JavaScript で変更するテスト（ cssText プロパティ編）。
目的
- インラインの CSS を変更したい。
- <style> の中に書く通常の書式。
- 一行で複数の CSS を設定したい。
- cssText プロパティを使用したい。
テストしてみました。
インラインのスタイルシート。 -
div , p などのタグに直接書くタイプの CSS を JavaScript で変更するテスト（ style プロパティ編）。
目的
- インラインの CSS を変更したい。
- 変更を足していきたい。
- 一行で一個の CSS を設定したい。
- <style> の中に書く通常の書式と少し違っても良い。
- style プロパティを使用したい。
テストしてみました。
インラインのスタイルシート。 -
要素の前後、内側に HTML を挿入可能な JavaScript の「insertAdjacentHTML」メソッドのテスト。
目的
- HTML 要素の前後、内側に新しい要素を追加したい。
- text ノードの前後に要素を追加したい。
- insertAdjacentHTML メソッドを使用したい。
テストしてみました。
JavaScript の insertAdjacentHTML -
CSS の width , height プロパティに 100px を指定して、外寸 100px 丁度で表示したい場合は、 box-sizing プロパティの border-box 値を試してみる。
目的
- HTML の要素を縦横 100px ちょうどで表示したい。
- border , padding を含めて縦横 100px にしたい。
- width , height に 100px を指定する。
- CSS で box-sizing: border-box を指定する。
-
CSS メディアクエリーで min-width または max-width を px で指定した場合、画面幅が何 px 以上、何 px 以下になると表示が切り替わるのかを調べてみました。
以上以下
CSS のメディアクエリーで「min-width」または「max-width」をピクセル px 単位で指定した場合、画面幅が何ピクセル px 以上、または、何ピクセル px 以下になると実際の表示が切り替わるのかを調べてみました。
(さらに…) -
スマートフォンの画面サイズをエミュレート（模倣）できる Firefox のレスポンシブデザインモード。
Ctrl+Shift+M
画面サイズの幅と高さをピクセル px 単位で指定可能です。 ウェブブラウザ「Mozilla Firefox」で「Ctrl+Shift+M」のキーボードショートカットを実行すると「レスポンシブデザインモード」という機能を使用可能なようです。
(さらに…) -
指定の ID 名、クラス名を持った HTML 要素が存在しているかどうかを JavaScript で判定するテスト（自分流）
自分流に
id , class の存在を調べる。 今回は、指定の ID 名、クラス名を持った HTML 要素が存在しているかどうかの判定を JavaScript で行う内容になっています。
(さらに…)