JavaScript はどのようにして Web ページに CSS スタイルを動的に追加できるのでしょうか?

JavaScript を使用して CSS スタイルを動的に追加する

JavaScript を介して CSS ルールを動的に追加する機能は、ウェブページをその場で。一般的なアプローチの 1 つは、新しいスタイル要素を作成してドキュメントの先頭に追加することです。

// Your CSS as text
var styles = `
    .qwebirc-qui .ircwindow div { 
        font-family: Georgia,Cambria,"Times New Roman",Times,serif;
        margin: 26px auto 0 auto;
        max-width: 650px;
    }
    .qwebirc-qui .lines {
        font-size: 18px;
        line-height: 1.58;
        letter-spacing: -.004em;
    }
    
    .qwebirc-qui .nicklist a {
        margin: 6px;
    }
`

var styleSheet = document.createElement("style")
styleSheet.textContent = styles
document.head.appendChild(styleSheet)

このコードは、新しいスタイル要素を作成し、そのテキスト コンテンツを提供された CSS スタイルに設定します。次に、スタイル要素をドキュメントの先頭に追加します。これにより、スタイルがすぐに適用されます。

以上がJavaScript はどのようにして Web ページに CSS スタイルを動的に追加できるのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。