ホームページ > ウェブフロントエンド > CSSチュートリアル > JavaScript はどのようにして Web ページに CSS スタイルを動的に追加できるのでしょうか?

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

Susan Sarandon
リリース: 2024-12-20 07:37:09
オリジナル
123 人が閲覧しました

How Can JavaScript Dynamically Add CSS Styles to a Web Page?

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート