javascript笔记--（第二十三章）动态加载脚本和样式

来源：互联网发布：sql数据库免费下载编辑：程序博客网时间：2024/04/29 12:49

动态脚本

动态加载js

<script type="text/javascript">var flag = true;//设置true再加载if (flag) {loadScript('test.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

<script type="text/javascript">var script = document.createElement('script');script.type = 'text/javascript';var text = document.createTextNode("alert('Lee')");//script.appendChild(text);//IE浏览器会报错,兼容用下面的语句script.text = "alert('hehe')"document.getElementsByTagName('head')[0].appendChild(script);</script>

动态样式

样式表有两种方式进行加载，一种是<link>标签，一种是<style>标签。

动态执行link

<script type="text/javascript">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);}</script>

动态执行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}'); IE不支持//style.appendChild(box);document.getElementsByTagName('head')[0].appendChild(style);insertRule(document.styleSheets[0], 'body', 'background:red', 0);}function insertRule(sheet, selectorText, cssText, position) {//如果是非IEif (sheet.insertRule) {sheet.insertRule(selectorText + "{" + cssText + "}", position);//如果是IE} else if (sheet.addRule) {sheet.addRule(selectorText, cssText, position);}}</script>

0 0