如何使用 JavaScript 加载 CSS 文件?
有时，任务是更改页面主题并在同一页面内容上使用不同的 CSS 文件。在这样的任务中，需要在选择主题时获取 CSS 并动态加载它。在这种情况下，必须通过 javascript 程序访问、加载甚至选择 CSS 文件。本文使用 HTML 和 javascript 代码演示了加载 CSS 文件的过程。这通过使用两个不同的示例来展示。在第一个示例中，在 Windows 加载事件中选择了一个 CSS 文件。在第二个示例中，使用两个按钮在单击按钮时加载单独的 CSS 文件。
示例 1:在 window.onload( ) 上加载 CSS 文件
文件夹和页面设计步骤 −
步骤 1 − 创建一个 html 文件并开始编写代码。创建 CSS 文件并定义背景、p 标签和 h1 标签的样式。
步骤 2 − 在 html 文件中的 <script> 标签内，编写将在页面完全加载时执行的代码。为此使用 window.onload()。
步骤 3 − 在 <script> 标签内，编写代码以首先获取 head 标签。然后创建一个链接标签并设置其属性。
步骤 4 - 选择 css 文件并将其添加到链接的 href。
步骤 5 - 现在将这个创建的链接添加到 head 标签中。
步骤 6 - 在浏览器中加载 HTML 文件并检查结果。
主 html 文件:loadcss1.html
使用的 CSS 文件:cssfilenew.css
loadcss1.html 的代码
<!DOCTYPE html>
<html>
<head>
<script>
// 文档加载时运行此函数
window.onload = () => {
var headTag = document.getElementsByTagName('head')[0]
const linkforCSSfile = document.createElement("link"); How to load CSS files using JavaScript?
linkforCSSfile.href = 'cssfilenew.css'
linkforCSSfile.type = 'text/css'
linkforCSSfile.rel = 'stylesheet'
headTag.appendChild(linkforCSSfile);
document.body.appendChild(headTag);
};
</script>
</head>
<body>
<h1>Example 1</h1>
<p id="showaddedCSS"> To load the CSS file using JS</p>
</body>
</html>
Code For cssfilenew.css
body {
background-color: rgb(110, 187, 197);
}
h1 {
color: rgb(15, 15, 87);
}
p {
color: rgb(197, 31, 31);
}
查看结果
要查看结果，请在浏览器中打开 html 文件。样式将包含在使用 Javascript 加载的 CSS 文件中。
示例 2:单击两个按钮加载不同的 CSS 文件
文件夹和页面设计步骤 −
步骤 1 − 创建一个 HTML 文件并开始编写代码。创建两个 CSS 文件，并在其中为背景、p 标签和 h1 标签定义不同的样式。
步骤 2 − 在 HTML 文件的 <script> 标签内，创建两个函数，function1 和 function2。为这些函数编写代码，这些代码将在调用这些函数时执行。
步骤 3 − 在 <script> 标签内，在这两个函数中编写代码以首先获取 head 标签。然后创建一个链接标签并设置其属性。
步骤 4 - 通过两个函数选择不同的 CSS 文件，并将它们添加到链接的 href。
步骤 5 - 将创建的链接添加到 head 标签。
步骤 6 - 现在创建两个按钮，并在不同的按钮点击时调用这两个函数。
步骤 7 - 在浏览器中加载 HTML 文件。最初不会添加 CSS 文件。它将在按钮点击时添加。单击两个按钮并检查结果。
主 HTML 文件:loadcss2.html
使用的 CSS 文件:cssfile.css 和 cssfilenew.css
loadcss2.html 的代码:
<!DOCTYPE html>
<html>
<head>
<script>
// 文档加载时运行此函数
function1 = () => {
var headTag = document.getElementsByTagName('head')[0]
const linkforCSSfile = document.createElement("link");
linkforCSSfile.href = 'cssfile.css'
linkforCSSfile.type = 'text/css'
linkforCSSfile.rel = 'stylesheet'
headTag.appendChild(linkforCSSfile);
document.body.appendChild(headTag);
};
function2 = () => {
var headTag = document.getElementsByTagName('head')[0]
const linkforCSSfile = document.createElement("link");
linkforCSSfile.href = 'cssfilenew.css'
linkforCSSfile.type = 'text/css'
linkforCSSfile.rel = 'stylesheet'
headTag.appendChild(linkforCSSfile);
document.body.appendChild(headTag);
};
</script>
</head>
<body>
<h1>Example 1</h1>
<p id="showaddedCSS"> To load the CSS file using JS</p>
<button onclick="function1()">Load CSS file One</button>
<button onclick="function2()">Load CSS file Two</button>
</body>
</html>
cssfile.css 的代码
body {
background-color: rgb(167, 197, 110);
}
h1 {
color: rgb(87, 15, 55);
}
p {
color: rgb(4, 59, 20);
}
cssfilenew.css 的代码
body {
background-color: rgb(110, 187, 197);
}
h1 {
color: rgb(15, 15, 87);
}
p {
color: rgb(197, 31, 31);
}
查看结果
要查看结果，请在浏览器中打开 html 文件。样式将包含在单击按钮时加载的 CSS 文件中。
3在本文中，使用两个不同的示例，给出了如何使用 javascript 代码动态加载 CSS 文件的方法。首先，给出了在加载页面时选择 CSS 文件的方法，然后给出了单击按钮时使用 CSS 文件的方法。为此，单击两个按钮以加载不同的 CSS 文件并更改同一页面的样式。
