CSS檔案用來描述HTML元素的顯示方式，有各種方法可以在HTML文件中加入CSS檔案。 JavaScript就可在HTML文件中載入CSS文件，那麼如何使用JavaScript載入CSS文件？下面這篇文章就來跟大家介紹一下，希望對大家有幫助。 【影片教學推薦：JavaScript教學】
做法：
##●使用document.getElementsByTagName（）方法取得HTML頭元素。 ● 使用createElement（'link'）方法建立新的連結元素。 ● 初始化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;
}<!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>範例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;
}<!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>
以上是如何使用JavaScript載入CSS檔案？ （程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
