JavaScriptを使用してCSSファイルをロードするにはどうすればよいですか? (コード例)-jsチュートリアル-php.cn

JavaScriptを使用してCSSファイルをロードするにはどうすればよいですか? (コード例)

青灯夜游

リリース： 2019-02-23 09:59:54

オリジナル

3593 人が閲覧しました

CSS ファイルは、HTML 要素の表示方法を記述するために使用されます。CSS ファイルを HTML ドキュメントに追加するには、さまざまな方法があります。 JavaScript は HTML ドキュメントに CSS ファイルを読み込むことができます。では、JavaScript を使用して CSS ファイルを読み込むにはどうすればよいでしょうか?以下の記事で紹介していますので、ご参考になれば幸いです。 [ビデオチュートリアルの推奨: JavaScript チュートリアル]

JavaScriptを使用してCSSファイルをロードするにはどうすればよいですか? (コード例)

##方法:

● document.getElementsByTagName() メソッドを使用して、HTML ヘッダー要素を取得します。

# createElement('link') メソッドを使用して、新しいリンク要素を作成します。

##リンク要素の属性を初期化します。

#●リンク要素をヘッダーに追加します。

コード例

次に、JavaScript が HTML ドキュメントに CSS ファイルを読み込む方法を示すコード例を示します。

例 1:

style.css という名前のファイルを作成します:

.demo { 
width: 400px;
height: 200px;
border: 1px solid red;
    color:red; 
    margin: 50px auto;
    text-align: center;
    line-height: 200px;
}

ログイン後にコピー

JavaScript を使用して CSS ファイルを追加します:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8">
    <title> 
        Load CSS file using JavaScript 
    </title> 
  
    <script> 
          
        // 获取HTML头元素
        var head = document.getElementsByTagName(&#39;head&#39;)[0];  
  
        // 创建新链接元素
        var link = document.createElement(&#39;link&#39;); 
  
        // 设置链接元素的属性
        link.rel = &#39;stylesheet&#39;;  
      
        link.type = &#39;text/css&#39;; 
      
        link.href = &#39;style.css&#39;;  
  
        // 将链接元素附加到HTML头
        head.appendChild(link);  
    </script>  
</head> 
  
<body> 
    <h2 class="demo">php中文网！</h2> 
</body> 
  
</html>

ログイン後にコピー

出力 :

JavaScriptを使用してCSSファイルをロードするにはどうすればよいですか? (コード例) 例 2:

style.css ファイルコード:

.demo { 
width: 400px;
height: 100px;
border: 1px solid green;
    font-size:25px; 
    font-weight:bold; 
    color:white; 
    background-color:pink; 
    text-align:center; 
    line-height: 100px;
    margin: 50px auto;
}

ログイン後にコピー

JavaScript を使用して CSS ファイルを追加

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8">
    <title> 
        Load CSS file using JavaScript 
    </title> 
  
    <script> 
          
        // 创建新链接元素
        var link = document.createElement(&#39;link&#39;);  
  
        // 设置链接元素的属性
        link.rel = &#39;stylesheet&#39;;  
        link.type = &#39;text/css&#39;; 
        link.href = &#39;style.css&#39;;  
        
        // 获取 head元素以向其追加链接元素
        document.getElementsByTagName(&#39;head&#39;)[0].appendChild(link); 
    </script>  
</head>  
<body> 
    <h2 class="demo">php中文网！</h2> 
</body> 
</html>

ログイン後にコピー

出力:

上記がこの記事の全内容です。皆さんの学習に役立つことを願っています。さらにエキサイティングなコンテンツについては、PHP 中国語 Web サイトの関連チュートリアルのコラムに注目してください。！！ JavaScriptを使用してCSSファイルをロードするにはどうすればよいですか? (コード例)