Below is my favorite writing:
| The code is as follows |
Copy Code |
$ ("<link>")
. attr ({rel: "stylesheet",
Type: "Text/css",
HREF: "Site.css"
})
. Appendto ("Head");
|
Some friends may use the wording below, but there are some small differences in form (append appendto), the principle is the same.
| The code is as follows |
Copy Code |
$ ("Head"). Append ("<link>");
CSS = $ (' head '). Children (": Last");
Css.attr ({
Rel: "Stylesheet",
Type: "Text/css",
HREF: "/content/site.css"
}); |
Finally, some friends may want to use it directly in JavaScript by using the following methods:
| The code is as follows |
Copy Code |
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);
} |
If this is a web interaction, we can use the above method to introduce a CSS file through jQuery or JavaScript, or we recommend using the original method.
Below I also introduce an example of a loadable js,css
| The code is as follows |
Copy Code |
| $.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 + ">");
}
}
}); How to use
$.includepath = ' http://hi.xxx/javascript/';
$.include ([' Json2.js ', ' jquery.tree.js ', ' jquery.tree.css ']); |
A complete instance of
Index.html
| The code is as follows |
Copy Code |
| <!--Created by Barrett at Rrpowered.com-->
<!--File name index.html-->
<script type= "Text/javascript" src= "Http://ajax.googleapis.com/ajax
/libs/jquery/1.4.4/jquery.min.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>
<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>
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;
} |
