目的
- class 名を設定して CSS を切り替えたい。
- 長めの CSS を一度に適用したい。
- class 名を “” にして CSS を解除したい。
- className を使用する。
テストしてみました。
(さらに…)タグ: let
JavaScript で変数を宣言したい場合は、「let」ステートメントで可能なようです。
-
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 を指定する。
-
スマートフォンの画面サイズをエミュレート（模倣）できる Firefox のレスポンシブデザインモード。
Ctrl+Shift+M
画面サイズの幅と高さをピクセル px 単位で指定可能です。 ウェブブラウザ「Mozilla Firefox」で「Ctrl+Shift+M」のキーボードショートカットを実行すると「レスポンシブデザインモード」という機能を使用可能なようです。
(さらに…) -
指定の ID 名、クラス名を持った HTML 要素が存在しているかどうかを JavaScript で判定するテスト（自分流）
自分流に
id , class の存在を調べる。 今回は、指定の ID 名、クラス名を持った HTML 要素が存在しているかどうかの判定を JavaScript で行う内容になっています。
(さらに…) -
スタイルシートで使用されている CSS セレクタの文字列を JavaScript の selectorText プロパティで取得するテスト。
selectorText
CSS で使用されているセレクタ名を取得するテスト。 スタイルシートの中で使用されている CSS セレクタの文字列を JavaScript で取得するテストを行ってみました。
(さらに…) -
CSS の width , max-width プロパティのテストとして 1 ～ 2048px の画像を表示してみるテスト。
最大幅
1 ～ 2048px の画像を表示している。 CSS の width と max-width プロパティのテストとして、 1 ～ 2048px の画像を表示するテストを行ってみました。
(さらに…)
