現在的位置: 首頁 > web前端 > 正文

jQuery動態加載css文件實現方法

2020年02月17日 web前端 ⁄ 共 4344字 ⁄ 字號 評論關閉

  有時我們可能會需要使用 jQuery 來加載一個外部的 css 文件,如在切換頁面布局時。思路是創建一個 link 元素,并將它添加到 標記中即可,下邊首先看看怎么使用 jQuery 來實現。

  jQuery動態加載css

  下邊是我喜歡的寫法:

  $("< link>")

  .attr({ rel: "stylesheet",

  type: "text/css",

  href: "site.css"

  })

  .appendTo("head");

  有些朋友可能會使用下邊的寫法,只是形式有些小差異(append appendTo),原理還是一樣的。

  $("head").append("< link>");

  css = $("head").children(":last");

  css.attr({

  rel: "stylesheet",

  type: "text/css",

  href: "/Content/Site.css"

  });

  最后,有的朋友可能希望直接在 javascript 中使用,方法如下:

  function addCSS() {

  var link = document.createElement('link');

  link.type = 'text/css';

  link.rel = 'stylesheet';

  link.href = '/Content/Site.css';

  document.getElementsByTagName("head")[0].appendChild(link);

  }

  如果是在 web 交互時,我們可以使用上述的方法通過 jQuery 或者 javascript 來引入一個 css 文件,否則還是建議使用原始的方法。

  下面我還介紹一個可加載js,css的實例。

  代碼如下

  $.extend({

  includePath: '',

  include: function(file) {

  var files = typeof file == "string" ? [ file]:file;

  for (var i = 0; i < files.length; i++) {   var name = files[i].replace(/^s|s$/g, "");   var att = name.split('.');   var ext = att[att.length - 1].toLowerCase();   var isCSS = ext == "css";   var tag = isCSS ? "link" : "script";   var attr = isCSS ? " type='text/css' rel='stylesheet' " : " language='javascript' type='text/javascript' ";   var link = (isCSS ? "href" : "src") + "='" + $.includePath + name + "'";   if ($(tag + "[" + link + "]").length == 0) document.write("<" + tag + attr + link + ">");

  }

  }

  });

  //使用方法

  $.includePath = 'http://hi.xxx/javascript/';

  $.include(['json2.js', 'jquery.tree.js', 'jquery.tree.css']);

  一個完整的實例

  index.html

  < !-- Created by Barrett at RRPowered.com -->

  < !-- File name index.html -->

  < html>

  < head>

  < script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">

  < script type="text/javascript">

  $(function(){

  $(".theme").click(function(){

  var theme=$(this).attr("rel");

  $("link").attr("href",$(this).attr('rel'));

  $("head").append("< link>");

  });

  });

  < /script>

  < /head>

  < body>

  < div class="theme" rel="blue.css">Blue< /div>

  < div class="theme" rel="orange.css">Orange< /div>

  < div class="theme" rel="yellow.css">Yellow< /div>

  < div class="theme" rel="default.css">Default< /div>

  < div class="container">

  < div class="menu">Tab1 Tab2 Tab3 Tab4 Tab5< /div>

  < div class="inner">

  Lorem ipsum dolor sit amet

  < /div>

  < div class="footer">copyright yoursite 2011< /div>

  < /div>

  < /body>

  < /html>

  default.css

  body{

  background-color:#ffffff;

  font-family:"arial";

  }

  .theme{

  margin:10px;

  width:70px;

  padding:5px;

  text-align:center;

  background-color:#BEF781;

  border:solid #333333 1px;

  color:#444444;

  font-weight:bold;

  cursor:pointer;

  }

  .container{

  margin-left:auto;

  margin-right:auto;

  width:700px;

  }

  .inner{

  padding:20px;

  border:solid #333333 1px;

  }

  .menu{

  background-color:#f2f2f2;

  padding:10px;

  font-weight:bold;

  }

  .footer{

  background-color:#f9f9f9;

  padding:5px;

  }

  blue.css

  body{

  background-color:#2E9AFE;

  font-family:"arial";

  }

  .theme{

  margin:10px;

  width:70px;

  padding:5px;

  text-align:center;

  background-color:#BEF781;

  border:solid #333333 1px;

  color:#444444;

  font-weight:bold;

  cursor:pointer;

  }

  .container{

  margin-left:auto;

  margin-right:auto;

  width:700px;

  }

  .inner{

  padding:20px;

  border:solid #333333 1px;

  background-color:#58ACFA;

  color:#ffffff;

  }

  .menu{

  background-color:#f2f2f2;

  padding:10px;

  font-weight:bold;

  }

  .footer{

  background-color:#f9f9f9;

  padding:5px;

  }

  yellow.css

  body{

  background-color:#F7FE2E;

  font-family:"arial";

  }

  .theme{

  margin:10px;

  width:70px;

  padding:5px;

  text-align:center;

  background-color:#BEF781;

  border:solid #333333 1px;

  color:#444444;

  font-weight:bold;

  cursor:pointer;

  }

  .container{

  margin-left:auto;

  margin-right:auto;

  width:700px;

  }

  .inner{

  padding:20px;

  border:solid #333333 1px;

  background-color:#f6f6f6;

  }

  .menu{

  background-color:#F2F5A9;

  padding:10px;

  font-weight:bold;

  }

  .footer{

  background-color:#F2F5A9;

  padding:5px;

  }

  orange.css

  body{

  background-color:#FE9A2E;

  font-family:"arial";

  }

  .theme{

  margin:10px;

  width:70px;

  padding:5px;

  text-align:center;

  background-color:#BEF781;

  border:solid #333333 1px;

  color:#444444;

  font-weight:bold;

  cursor:pointer;

  }

  .container{

  margin-left:auto;

  margin-right:auto;

  width:700px;

  }

  .inner{

  padding:20px;

  background-color:#F7BE81;

  color:#404040;

  }

  .menu{

  background-color:#ffffff;

  padding:10px;

  font-weight:bold;

  color:#FFBF26;

  }

  .footer{

  background-color:#ffffff;

  padding:5px;

  color:#FFBF26;

  }

  以上就是本次給大家分享的關于java的全部知識點內容總結,大家還可以在下方相關文章里找到相關文章進一步學習,感謝大家的閱讀和支持。

抱歉!評論已關閉.

奔驰宝马破解版下载 山西省十一选五最牛 山西快乐十分玩法 河南快3开奖结果今天一定牛 股票融资融券 33cc彩票app下载 福建11选5走势图更新最快 极速时时彩能做鬼吗 吉林11选5乐选2玩法 安徽11选5一定牛开奖结果 平特一肖概率计算方法 投资理财平台 快乐十分20分钟开奖结果 特马绝密公式规律 云南11选五电视走势图 河北快三近100期 股票放量下跌换手率高