📅 最后修改于: 2023-12-03 15:08:59.847000 🧑 作者: Mango
通常情况下，当我们需要更新页面的样式时，我们会添加一个新的 CSS 文件或修改现有的 CSS 文件，并重新加载页面来查看更改。但是，在某些情况下，我们不想重新加载整个页面，而只是想重新加载 CSS 。那么如何在不使用 JavaScript 的情况下实现呢？
可以使用 link 标签的 rel 属性来指定 CSS 文件的类型，并在 href 属性中指定文件的路径。在不重新加载页面的情况下，可以更改 href 属性的值来重新加载 CSS 文件。
以下是示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Reload CSS without JavaScript</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Reload CSS without JavaScript</h1>
<p>This is a paragraph.</p>
<button id="reload">Reload CSS</button>
<script>
var button = document.getElementById('reload');
var link = document.querySelector('link[rel="stylesheet"]');
button.addEventListener('click', function() {
link.href = "style.css?" + new Date().getTime();
});
</script>
</body>
</html>
另一种方法是使用 JavaScript 将样式内容替换为新的内容。在这种情况下，所有 CSS 样式都必须在页面的 head 部分内联。
以下是示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Reload CSS without JavaScript</title>
<style>
p {
font-size: 14px;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>Reload CSS without JavaScript</h1>
<p>This is a paragraph.</p>
<button id="reload">Reload CSS</button>
<script>
var button = document.getElementById('reload');
var style = document.getElementsByTagName('style')[0];
var newStyle = 'p { font-size: 16px; line-height: 1.5; }';
button.addEventListener('click', function() {
style.innerHTML = newStyle;
});
</script>
</body>
</html>
以上两种方法不需要使用 JavaScript 重新加载页面就可以重新加载 CSS 。第一种方法使用 link 标签，第二种方法使用 JavaScript 替换样式内容。选择哪种方法取决于你的具体需求。