极客笔记如何使用JavaScript加载CSS文件
有时，任务是更改页面主题并在同一页面内容上使用不同的CSS文件。在这些任务中，需要在选择主题时动态地获取并加载CSS文件。在这种情况下，需要通过javascript程序访问、加载甚至选择CSS文件。本文使用HTML和javascript代码演示了加载CSS文件的过程。通过两个不同的实例来展示。在第一个示例中，选择了一个CSS文件在窗口加载事件上。在第二个示例中，使用两个按钮在按钮点击时加载不同的CSS文件。
示例1：在window.onload()上加载CSS文件
文件夹和页面设计步骤 –
- 步骤 1 - 创建一个HTML文件并开始编写代码。创建一个CSS文件并定义背景、p标签和h1标签的样式。
- 步骤 2 − 在html文件中的
<script>标签中，编写当页面完全加载时将执行的代码。为此使用window.onload()。- 步骤 3 − 在
<script>标签中编写代码，首先获取head标签。然后创建一个link标签并设置它的属性。 - 步骤 4 − 选择css文件并将其添加到链接的href中。
- 步骤 5 − 现在将这个创建好的链接添加到head标签中。
- 步骤 6 − 在浏览器中加载HTML文件并检查结果。
- 步骤 3 − 在
loadcss1.html
<!DOCTYPE html>
<html>
<head>
<script>
// run this function when the document is loaded
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>
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标签的代码。然后创建一个link标签并设置它的属性。
步骤 4 − 通过这两个函数选择不同的CSS文件，并将它们添加到链接的href中。
步骤 5 − 将创建的链接添加到head标签中。
步骤 6 − 现在创建两个按钮，并在不同的按钮点击时调用这两个函数。
步骤 7 − 在浏览器中加载HTML文件。CSS文件没有被添加。它将被添加到按钮点击。单击这两个按钮并检查结果。
loadcss2.html:
<!DOCTYPE html>
<html>
<head>
<script>
// run this function when the document is loaded
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文件中包含。
总结
在本文中，通过两个不同的示例，展示了如何使用javascript代码动态加载CSS文件。首先，给出了在页面加载时选择CSS文件的方法，然后给出了在按钮单击时使用CSS文件的方法。单击这两个按钮可以加载不同的CSS文件，并更改同一个页面的样式。