数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何使用 JavaScript 加载 CSS 文件？
有时，任务需要更改页面主题并在同一页面内容上使用不同的 CSS 文件。在这种任务中，需要获取 CSS 并动态加载它，同时选择主题。在这种情况下，CSS 文件必须通过 JavaScript 程序进行访问、加载甚至选择。本文使用 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 文件并将其添加到 link 的 href 属性中。
步骤 5 − 现在将创建的 link 添加到 head 标签中。
步骤 6 − 在浏览器中加载 HTML 文件并检查结果。
主 html 文件：loadcss1.html
使用的 CSS 文件：cssfilenew.css
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 文件，并将这些文件添加到 link 的 href 属性中。
步骤 5 − 将创建的 link 添加到 head 标签中。
步骤 6 − 现在创建两个按钮，并在不同的按钮点击时调用这两个函数。
步骤 7 − 加载浏览器中的 HTML 文件。CSS 文件最初不会被添加。它将在点击按钮时添加。点击这两个按钮并检查结果。
主 HTML 文件：loadcss2.html
使用的 CSS 文件：cssfile.css 和 cssfilenew.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 文件并更改同一页面的样式。
6K+ 次浏览
