如何根据路由反应添加 css - Javascript (1)

📌 相关文章

📜 如何根据路由反应添加 css - Javascript (1)

📅 最后修改于: 2023-12-03 15:24:49.699000 🧑 作者: Mango

如何根据路由反应添加 CSS - JavaScript

在编写 Web 应用程序时，我们通常需要根据页面路由变化来动态加载一些 CSS 和 JavaScript 文件，以使用户体验更加流畅。下面简单介绍一下如何根据路由反应添加 CSS 和 JavaScript。

CSS

方法一：直接通过 link 标签添加

在 HTML 页面中，我们可以通过 link 标签添加 CSS，如下所示：

<!DOCTYPE html>
<html>
<head>
  <title>My web page</title>
  <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
  <h1>Hello, world!</h1>
</body>
</html>

方法二：通过 JavaScript 动态添加

在 JavaScript 中，我们可以通过 document.createElement 和 document.appendChild 函数动态创建和添加 link 标签，实现动态添加 CSS。代码如下：

// 动态添加 link 标签
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.href = 'css/style.css';
link.rel = 'stylesheet';
link.type = 'text/css';
head.appendChild(link);

方法三：通过路由反应添加

在路由变化的时候，我们可以通过修改 link 标签的 href 属性来加载不同的 CSS 文件，实现页面样式的动态修改。具体实现方法可以参考如下代码：

// 获取路由
var route = window.location.pathname;

// 根据路由反应添加对应的 CSS 文件
if(route === '/home') {
  var link = document.getElementById('home-css');
  if(link) {
    link.href = 'css/home.css';
  } else {
    link = document.createElement('link');
    link.href = 'css/home.css';
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.id = 'home-css';
    document.getElementsByTagName('head')[0].appendChild(link);
  }
} else if(route === '/about') {
  var link = document.getElementById('about-css');
  if(link) {
    link.href = 'css/about.css';
  } else {
    link = document.createElement('link');
    link.href = 'css/about.css';
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.id = 'about-css';
    document.getElementsByTagName('head')[0].appendChild(link);
  }
}

JavaScript

方法一：直接通过 script 标签添加

在 HTML 页面中，我们可以通过 script 标签添加 JavaScript，如下所示：

<!DOCTYPE html>
<html>
<head>
  <title>My web page</title>
  <script src="js/main.js"></script>
</head>
<body>
  <h1>Hello, world!</h1>
</body>
</html>

方法二：通过 JavaScript 动态添加

在 JavaScript 中，我们可以通过 document.createElement 和 document.appendChild 函数动态创建和添加 script 标签，实现动态添加 JavaScript。代码如下：

// 动态添加 script 标签
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.src = 'js/main.js';
script.type = 'text/javascript';
head.appendChild(script);

方法三：通过路由反应添加

在路由变化的时候，我们可以通过动态创建和添加 script 标签的方式来加载不同的 JavaScript 文件，实现页面逻辑的动态修改。具体实现方法可以参考如下代码：

// 获取路由
var route = window.location.pathname;

// 根据路由反应添加对应的 JavaScript 文件
if(route === '/home') {
  var script = document.getElementById('home-js');
  if(script) {
    script.src = 'js/home.js';
  } else {
    script = document.createElement('script');
    script.src = 'js/home.js';
    script.type = 'text/javascript';
    script.id = 'home-js';
    document.getElementsByTagName('head')[0].appendChild(script);
  }
} else if(route === '/about') {
  var script = document.getElementById('about-js');
  if(script) {
    script.src = 'js/about.js';
  } else {
    script = document.createElement('script');
    script.src = 'js/about.js';
    script.type = 'text/javascript';
    script.id = 'about-js';
    document.getElementsByTagName('head')[0].appendChild(script);
  }
}

以上就是根据路由反应添加 CSS 和 JavaScript 的方法介绍，希望对大家有所帮助。