📜  通过 jquery 添加 css 文件 - CSS (1)

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

通过 jQuery 添加 CSS 文件

在 web 开发过程中,我们经常需要使用 CSS 文件来美化页面。而通过 jQuery,我们可以方便地添加 CSS 文件。

添加方法
方法一:使用 jQuery 的 $.fn.load 方法
$('head').append('<link rel="stylesheet" type="text/css" href="style.css" />');
方法二:使用 jQuery 的 $.fn.load 方法
$('<link rel="stylesheet" type="text/css" href="style.css" />').appendTo('head');
示例代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>添加 CSS</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>
  <body>
    <h1>添加 CSS</h1>
    <p>这是一段普通的文字。</p>
    <button id="add-css">添加 CSS</button>
    <script>
      $(function() {
        $('#add-css').click(function() {
          $('head').append('<link rel="stylesheet" type="text/css" href="style.css" />');
        });
      });
    </script>
  </body>
</html>
注意事项
  1. 请确保 CSS 文件的路径正确。
  2. 使用 $.fn.load 方法时,注意回调函数使用的位置。
  3. 最好将 JavaScript 代码放在 HTML 文档底部,以避免页面加载过慢。