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

swmozowtfl · *发表于* 2015-7-10 22:24:59

点评：这篇文章主要介绍了html动态加载css样式和js脚本示例,需要的朋友可以参考下
一、动态加载脚本
当网站需求变大，脚本的需求也逐步变大。我们就不得不引入太多的 js 脚本而降低了整站的性能，所以就出现了动态脚本的概念，在适时的时候加载相应的脚本。
比如：我们想在需要检测浏览器的时候，再引入检测文件。
代码如下:
<script type=text/javascript>
window.onload = function(){
alert(typeof browserdetect);
}
var flag = true; //设置 true 再加载
if (flag) {
loadscript('browserdetect.js'); //设置加载的 js
}
function loadscript(url) {
var script = document.createelement('script');
script.type = 'text/javascript';
script.src = url;
//document.head.appendchild(script); //document.head 表示<head>
document.getelementsbytagname('head')[0].appendchild(script);
}
</script>动态执行 js</p> <p>
<script type=text/javascript>
window.onload = function(){
}
var flag = true; //设置 true 再加载
if (flag) {
var script = document.createelement('script');
script.type = 'text/javascript';
var text = document.createtextnode(alert('lee')); //ie6,7,8 浏览器报错
script.appendchild(text);
document.getelementsbytagname('head')[0].appendchild(script);
}
</script>ie 6,7,8浏览器认为 script 是特殊元素，不能在访问子节点。为了兼容，可以使用 text属性来代替。</p> <p>
<script type=text/javascript>
window.onload = function(){
}
var flag = true; //设置 true 再加载
if (flag) {
var script = document.createelement('script');
script.type = 'text/javascript';
script.text = alert('lee');
script.appendchild(text);
document.getelementsbytagname('head')[0].appendchild(script);
}
</script>需要做所有浏览器兼容
二、动态加载样式
为了动态的加载样式表，比如切换网站皮肤。样式表有两种方式进行加载，一种是<link>标签，一种是<style>标签。
动态执行 link
代码如下:
var flag = true;
if (flag) {
loadstyles('basic.css');
}
function loadstyles(url) {
var link = document.createelement('link');link.rel = 'stylesheet';
link.type = 'text/css';
link.href = url;
document.getelementsbytagname('head')[0].appendchild(link);
}

动态执行 style
代码如下:
<script type=text/javascript>
var flag = true;
if (flag) {
var style = document.createelement('style');
style.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);
}
function insertrule(sheet, selectortext, csstext, position) {
//如果是非 ie6,7,8
if (sheet.insertrule) {
sheet.insertrule(selectortext + { + csstext + }, position);
//如果是 ie6,7,8
} else if (sheet.addrule) {
sheet.addrule(selectortext, csstext, position);
}
}
</script>

更多网页制作信息请查看：网页制作

wwdu926a · *发表于* 2015-7-23 19:00:10

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

GoodyFouppy · *发表于* 2015-7-23 19:04:34

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

seazvyt · *发表于* 2015-7-23 19:04:36

老天不公啊.....

seazvyt · *发表于* 2015-9-11 21:04:16

我.......伤心

gevaemaidovef · *发表于* 2015-9-11 21:04:19

我又回复了

bqtklouu · *发表于* 2015-9-11 21:04:30

我的我的忘记了呵呵

bqtklouu · *发表于* 2015-9-11 21:05:02

哈你逗逗他啊

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

回复|共 7 个

回复

快捷导航