html动态加载css样式和js脚本示例_HTML/Xhtml_网页制作
程序员文章站
2022-03-19 13:33:43
...
一、动态加载脚本
动态执行 js
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
当网站需求变大,脚本的需求也逐步变大。我们就不得不引入太多的 JS 脚本而降低了整站的性能,所以就出现了动态脚本的概念,在适时的时候加载相应的脚本。
比如:我们想在需要检测浏览器的时候,再引入检测文件。
复制代码
代码如下:动态执行 js
IE 6,7,8浏览器认为 script 是特殊元素,不能在访问子节点。为了兼容,可以使用 text属性来代替。
需要做所有浏览器兼容
二、动态加载样式
为了动态的加载样式表,比如切换网站皮肤。样式表有两种方式进行加载,一种是标签,一种是
动态执行 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
复制代码
代码如下: