ホームページ > 記事 > ウェブフロントエンド > JavaScriptを使用してCSSファイルをロードするにはどうすればよいですか? (コード例)
JavaScriptを使用してCSSファイルをロードするにはどうすればよいですか? (コード例)
- 青灯夜游オリジナル
- 2019-02-23 09:59:543546ブラウズ
CSS ファイルは、HTML 要素の表示方法を記述するために使用されます。CSS ファイルを HTML ドキュメントに追加するには、さまざまな方法があります。 JavaScript は HTML ドキュメントに CSS ファイルを読み込むことができます。では、JavaScript を使用して CSS ファイルを読み込むにはどうすればよいでしょうか?以下の記事で紹介していますので、ご参考になれば幸いです。 [ビデオチュートリアルの推奨: JavaScript チュートリアル]
)
##方法:
● 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('head')[0];
// 创建新链接元素
var link = document.createElement('link');
// 设置链接元素的属性
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'style.css';
// 将链接元素附加到HTML头
head.appendChild(link);
</script>
</head>
<body>
<h2 class="demo">php中文网！</h2>
</body>
</html>出力 :
 "155082967243291JavaScriptを使用してCSSファイルをロードするにはどうすればよいですか? (コード例)")
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('link');
// 设置链接元素的属性
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'style.css';
// 获取 head元素以向其追加链接元素
document.getElementsByTagName('head')[0].appendChild(link);
</script>
</head>
<body>
<h2 class="demo">php中文网！</h2>
</body>
</html>出力:
上記がこの記事の全内容です。皆さんの学習に役立つことを願っています。さらにエキサイティングなコンテンツについては、PHP 中国語 Web サイトの関連チュートリアルのコラムに注目してください。 ！ ！ 
以上がJavaScriptを使用してCSSファイルをロードするにはどうすればよいですか? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。