有时我们可能会需要使用 JQuery 来加载一个外部的 CSS 文件，如在切换页面布局时。思路是创建一个 link 元素，并将它添加到 标记中即可，下边首先看看怎么使用 jQuery 来实现。
下边是我喜欢的写法：
$("<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 + "></" + tag + ">"); } } }); //使用方法 $.includePath = 'http://hi.xxx/javascript/'; $.include(['json2.js', 'jquery.tree.js', 'JQuery.tree.css']);
一个完整的实例：
<html> <head> <script type="text/Javascript" src="/demo/js/jq.js"></script> <link rel="stylesheet" type="text/css" href="default.css"> <title>A simple jQuery image slide</title> <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>
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;
}
网友评论文明上网理性发言 已有0人参与
发表评论: