html动态加载css样式和js脚本

点评：这篇文章主要介绍了html动态加载css样式和js脚本示例,需要的朋友可以参考下
% v: P, L( H3 j1 U5 n一、动态加载脚本
当网站需求变大，脚本的需求也逐步变大。我们就不得不引入太多的 js 脚本而降低了整站的性能，所以就出现了动态脚本的概念，在适时的时候加载相应的脚本。
3 r0 K" L( B( B1 {- j- e# T比如：我们想在需要检测浏览器的时候，再引入检测文件。
代码如下:
<script type=text/javascript>
window.onload = function(){
4 s* A* n& P7 p4 u$ w1 Jalert(typeof browserdetect);
6 s% u1 Z1 V3 I}
var flag = true; //设置 true 再加载
if (flag) {
0 X1 M9 I9 R% E3 ]6 c3 m: v0 Zloadscript('browserdetect.js'); //设置加载的 js
3 I, p/ e; n2 m2 F/ t0 \$ S) d}
+ ^2 k# \+ b5 x3 ufunction loadscript(url) {
+ s. S8 W' {4 m9 yvar script = document.createelement('script');
script.type = 'text/javascript';
7 Q8 O, m# M# O, D& m: Z* gscript.src = url;
8 u5 E) V4 T1 ]//document.head.appendchild(script); //document.head 表示<head>
0 _3 K- t  Y7 sdocument.getelementsbytagname('head')[0].appendchild(script);
}
) G1 [7 ~& ], \</script>动态执行 js</p> <p>
# w" K) _: Z+ |0 @2 N- a<script type=text/javascript>
window.onload = function(){
}
0 p2 b( ~8 r: `( E- |/ i' M+ I0 Yvar flag = true; //设置 true 再加载
# ^) R5 i0 z( z$ G; S' Q# pif (flag) {
1 S5 b2 y  _2 }$ l( {7 W6 D' K, @( d* jvar script = document.createelement('script');
script.type = 'text/javascript';
; W" U- Z0 f' k, t/ [- Pvar text = document.createtextnode(alert('lee')); //ie6,7,8 浏览器报错
0 N* Y. m) E# [8 k  rscript.appendchild(text);
3 o* w1 N; h9 O" I4 @document.getelementsbytagname('head')[0].appendchild(script);
}
! ?* S. R# e- k# z& q0 g</script>ie 6,7,8浏览器认为 script 是特殊元素，不能在访问子节点。为了兼容，可以使用 text属性来代替。</p> <p>
<script type=text/javascript>
: r7 L! ?; B5 B) w! Mwindow.onload = function(){
}
var flag = true; //设置 true 再加载
* B2 g4 P* X+ B# Nif (flag) {
: K/ y2 S" k7 c7 B# Nvar script = document.createelement('script');
script.type = 'text/javascript';
' F, t' q2 w; J% R3 yscript.text = alert('lee');
script.appendchild(text);
. @) F; P0 A1 Z9 B+ m2 z9 }3 u: m' gdocument.getelementsbytagname('head')[0].appendchild(script);
* B# F5 }! U# c5 F# J! k}
) V/ T3 g4 ^* y4 d* V, x+ {</script>需要做所有浏览器兼容
二、动态加载样式
为了动态的加载样式表，比如切换网站皮肤。样式表有两种方式进行加载，一种是<link>标签，一种是<style>标签。
. ]) y/ J! N2 ^3 [动态执行 link
代码如下:
var flag = true;
8 `0 l6 Q( c0 s3 |3 _if (flag) {
loadstyles('basic.css');
}
function loadstyles(url) {
var link = document.createelement('link');link.rel = 'stylesheet';
link.type = 'text/css';
link.href = url;
/ o- i2 s, E  ]0 S- Q, H" X/ adocument.getelementsbytagname('head')[0].appendchild(link);
6 N" ^, t0 K0 E! I( l}
3 w* E" M% t' d- _) f# f
* ^2 R9 L& d; K动态执行 style
! h0 Z$ B( B# h: ]6 Z/ [代码如下:
: ]9 C6 d4 r% [* x% Z3 V/ n! U<script type=text/javascript>
var flag = true;
! `5 l6 }) Q, C; y5 l  `* tif (flag) {
var style = document.createelement('style');
, Y0 e9 y; I2 j: istyle.type = 'text/css';
//var box= document.createtextnode('#box{background:red}');// ie6,7,8 不支持
//style.appendchild(box);
document.getelementsbytagname('head')[0].appendchild(style);
insertrule(document.stylesheets[0], '#box', 'background:red', 0);
}
" S: t& Q, S5 Z  h9 Lfunction insertrule(sheet, selectortext, csstext, position) {
//如果是非 ie6,7,8
0 n0 \7 W! j( F  y1 O1 t& S6 k1 a& vif (sheet.insertrule) {
& D; A  u6 e' V% o; Osheet.insertrule(selectortext + { + csstext + }, position);
//如果是 ie6,7,8
3 s, f( Q" _/ Y) Z+ Z6 P  _} else if (sheet.addrule) {
" I+ ~3 o5 \, M' ssheet.addrule(selectortext, csstext, position);
}
}
</script>
3 q$ l3 K# R0 M0 m7 j( }
( \3 k5 U3 q% Y- `! E9 ^! e' b更多网页制作信息请查看： 网页制作

系统居然怀疑我灌水，我身边又没有水龙头。哦…明白了，身上有一个……

经过你的指点 我还是没找到在哪 ~~~

老天不公啊.....

我.......伤心

我又回复了

我的我的 忘记了 呵呵

哈 你逗逗他啊