アドレスバー上のステートメントはページのスタイルを変更します。 (チュートリアル)_JavaScript スキル

まず次のステートメントをアドレス バーに貼り付け、Enter キーを押して効果を確認します。

javascript:with(document.body){background="";bgColor="#779966";text="#bb4400"};void(document.styleSheets[0].addRule("TD", "border:1 plain black;background-color:#eef9ee! important"))

以下は説明です:

1.javascript:url
擬似 URL テクノロジ。これは、href 属性と src 属性を含むすべてのタグに適用されます。属性が値として URL を受け入れることができる場合、この javascript:url を受け入れることができます。したがって、アドレス バーは location.href と同等であるため、例外ではありません。 :)

2. 戻り値
ほとんどの js ステートメントには戻り値があり、location.href を機能させるために戻り値を href 属性に渡す必要はありません。
戻り値を生成しないが式を計算するalertを使用すると、目的を達成できます。つまり、ステートメントをalertのパラメータとして使用し、alertにそれを実行させます。
しかし、alert を使用すると、計算の最終結果 (つまり、ステートメント セグメントの最終戻り値) がポップアップ表示されます。ポップアップ ボックスは必要ありません。ステートメントを静かに実行するだけで済みます。戻り値はありません。 void 演算子はまさに必要なものです。

3. 戻り値について話しましょう
順次実行されるステートメントセグメントで、各文に戻り値があり、特定の属性 (href など) が 1 つの戻り値のみを受け取ることができる場合、戻り値はどうなるのでしょうか？答えは最後です。したがって、最後の文に void を追加するだけで済みます。

4.with ステートメント
with ステートメントは、コードの量を減らすために中括弧で囲まれたステートメント セグメントのデフォルト オブジェクトを設定できます。上記の with(document.body){background="";bgColor="#779966";text="#bb4400"}
は、
document.body.background=""
document と同等です。 .body.bgColor="#779966"
document.body.text="#bb4400"

5. 定義されたスタイルシートに新しいルールを追加します
document.styleSheets[0].addRule ( "TD","border:1 sold black")
上記のステートメントは、ページ内の最初のスタイル シート オブジェクトにルールを追加します。つまり、すべてのテーブル セルにピクセル幅の黒の実線枠を持たせるようにします。
styleSheets は、ページ上のすべての 要素と 要素のコレクションです。 styleSheets[0] は、最初のスタイル シート要素を参照します。
addRule() メソッドは、スタイル シート オブジェクトにルールを挿入するために使用されます。最初のパラメーターはセレクターで、2 番目のパラメーターはセレクターの定義です。

6. スタイルシートの !payment 属性
ページ内では、! important 属性を持つスタイルが優先されます。例:
p {color:red! important}

ここのテキストは赤色です。


わかりました。冒頭の文にはこれらの知識ポイントが含まれていますが、これに基づいてさらに学ぶべき革新はありますか?イノベーションを促進します。 :)