目的
- class 名を設定して CSS を切り替えたい。
- 長めの CSS を一度に適用したい。
- class 名を “” にして CSS を解除したい。
- className を使用する。
テストしてみました。
(さらに…)タグ: document
JavaScript で HTML の操作を行いたい場合は、 Document インターフェイスの中のプロパティ、メソッドを使用する事で可能なようです。
-
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 で行う内容になっています。
(さらに…) -
スタイルシートで使用されている CSS セレクタの文字列を JavaScript の selectorText プロパティで取得するテスト。
selectorText
CSS で使用されているセレクタ名を取得するテスト。 スタイルシートの中で使用されている CSS セレクタの文字列を JavaScript で取得するテストを行ってみました。
(さらに…) -
CSS の width , max-width プロパティのテストとして 1 ～ 2048px の画像を表示してみるテスト。
最大幅
1 ～ 2048px の画像を表示している。 CSS の width と max-width プロパティのテストとして、 1 ～ 2048px の画像を表示するテストを行ってみました。
(さらに…) -
Microsoft Edge （マイクロソフト エッジ）で空白のお気に入りを新規追加して、ブックマークレットを作成。お気に入りバーから実行する方法。
Edge でブックマークレットを実行したい
今回の投稿は、ウェブブラウザの Microsoft Edge マイクロソフト エッジ で、ブックマークレットを新規作成して実行するテストを行ってみたいと思います。
(さらに…) -
ウェブブラウザの「開発ツール」で Javascript の実行テスト。 Mozilla Firefox の場合。 Chrome , Edge は起動方法まで。
標準搭載
今回の投稿では、ウェブブラウザに標準で付いている開発ツールを使用して Javascript （ジャバスクリプト）の実行テストを行ってみたいと思います。使用するブラウザは、 Mozilla Firefox （ファイヤーフォックス）がメインになりますが、 Chrome（クローム）と Edge（エッジ）の開発ツールの起動方法までは調べてみましたので参考にご覧ください。テスト OS は、 Windows10 になります。
(さらに…)
