博客搬家了,欢迎大家关注,https://bobjin.com

开发过程中经常需要动态加载js和css,今天特意总结了一下常用的方法。

1、动态加载js

  方法一:动态加载js文件

     // 动态加载js脚本文件
function loadScript(url) {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
document.body.appendChild(script);
}
// 测试
loadScript("javascript/lib/cookie.js");

  方法二:动态加载js脚本

    // 动态加载js脚本
function loadScriptString(code) {
var script = document.createElement("script");
script.type = "text/javascript";
try{
// firefox、safari、chrome和Opera
script.appendChild(document.createTextNode(code));
}catch(ex) {
// IE早期的浏览器 ,需要使用script的text属性来指定javascript代码。
script.text = code;
}
document.body.appendChild(script);
}
// 测试
var text = "function test(){alert('test');}";
loadScriptString(text);
test();

2、动态加载css

  方法一:动态加载css文件

     // 动态加载css文件
function loadStyles(url) {
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = url;
document.getElementsByTagName("head")[0].appendChild(link);
}
// 测试
loadStyles("css/secondindex.css");

  方法二:动态加载css脚本

    // 动态加载css脚本
function loadStyleString(cssText) {
var style = document.createElement("style");
style.type = "text/css";
try{
// firefox、safari、chrome和Opera
style.appendChild(document.createTextNode(cssText));
}catch(ex) {
// IE早期的浏览器 ,需要使用style元素的stylesheet属性的cssText属性
style.styleSheet.cssText = cssText;
}
document.getElementsByTagName("head")[0].appendChild(style);
}
// 测试
var css = "body{color:blue;}";
loadStyleString(css);
博客搬家了,欢迎大家关注,https://bobjin.com

动态加载js和css的更多相关文章

  1. 动态加载js和css的jquery plugin

    一个简单的动态加载js和css的jquery代码,用于在生成页面时通过js函数加载一些共通的js和css文件. //how to use the function below: //$.include ...

  2. 动态加载js、css 代码

    一.原生js: /** * 加载js和css文件 * @param jsonData.path 前缀路径 * @param jsonData.url 需要加载的js路径或css路径 * @param ...

  3. 移动端性能优化动态加载JS、CSS

    JS CODE (function() { /** * update: * 1.0 */ var version = "insure 1.1.0"; var Zepto = Zep ...

  4. js插件动态加载js、css解决方案

    最近因为工作需要做了一个js自动导入的插件,一开始很天真的以为动态创建个script添加到head中就ok了,试了之后才发现了问题,就是如果同时引入了多个js文件,而且后一个文件中用到了前一个文件中的 ...

  5. JavaScript(第二十二天)【动态加载js和css】

    学习要点: 1.元素位置 2.动态脚本 3.动态样式 本章主要讲解上一章剩余的获取位置的DOM方法.动态加载脚本和样式.   一.元素位置 上一章已经通过几组属性可以获取元素所需的位置,那么这节课补充 ...

  6. 动态加载JS 和 CSS

    <script type="text/javascript"> $(function () { var filename = '/assets/css/main.css ...

  7. 动态加载JS(css)文件

    <script language="javascript">document.write("<script src='test.js'><\ ...

  8. 动态加载js css 插件

    简介 动态加载js,css在现在以及将来肯定是很重要的.目前来看前端代码编写的业务量已经远远超过后端编写的.随着对用户体验度逐渐增强,前端业务复杂,加载速度变得很慢很慢.为了解决这个问题,目前出现的两 ...

  9. 动态加载js,css

    今天项目中需要用到动态加载 CSS 文件,经过一番折腾终于搞定,回家整理了一下,顺便融合了动态加载 JS 的功能写成了一个对象,先上代码: var dynamicLoading = { css: fu ...

随机推荐

  1. MySQL 正则表达式

    介绍 正则表达式用来描述或者匹配符合规则的字符串.它的用法和like比较相似,但是它又比like更强大,能够实现一些很特殊的规则匹配:正则表达式需要使用REGEXP命令,匹配上返回"1&qu ...

  2. Javascript本质第二篇:执行上下文

    在上一篇文章<Javascript本质第一篇:核心概念>中,对Javascript执行上下文做了解释,但是这些都是基于Javascript标准中对执行上下文的定义,也就是说理论上的东西,本 ...

  3. 跟vczh看实例学编译原理——一:Tinymoe的设计哲学

    自从<序>胡扯了快一个月之后,终于迎来了正片.之所以系列文章叫<看实例学编译原理>,是因为整个系列会通过带大家一步一步实现Tinymoe的过程,来介绍编译原理的一些知识点. 但 ...

  4. JWS.Mono如何进行“在线安装”

    这里话就不多说了,使用方法如下: wget http://jhonge.net/down4load/1413998270361/jwsmono_net.sh chmod a+x jwsmono_net ...

  5. 注册OCX失败

    今天注册某个OCX时,Windows报告以下错误: 模块“XXX.ocx”已加载,但对 DllRegisterServer 的调用失败,错误代码为 0x80040200. 这是Windows权限引起的 ...

  6. C语言 · 回文数 · 基础练习

    问题描述 1221是一个非常特殊的数,它从左边读和从右边读是一样的,编程求所有这样的四位十进制数. 输出格式 按从小到大的顺序输出满足条件的四位十进制数.   代码如下: 注意:这里要提醒一下读者:蓝 ...

  7. JS面向对象(2) -- this的使用,对象之间的赋值,for...in语句,delete使用,成员方法,json对象的使用,prototype的使用,原型继承与原型链

    相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...

  8. .net 网络编程

    1.首先说下计算机网络中的TCP/IP参考模型 TCP/IP把网络分为5层,每一层负责完成不同的功能 1)应用层:传输报文,提供各种网络应用,有FTP.SMTP.HTTP等协议 2)运输层:传输报文段 ...

  9. .NET平台开源项目速览(11)KwCombinatorics排列组合使用案例(1)

    今年上半年,我在KwCombinatorics系列文章中,重点介绍了KwCombinatorics组件的使用情况,其实这个组件我5年前就开始用了,非常方便,麻雀虽小五脏俱全.所以一直非常喜欢,才写了几 ...

  10. 写在最前面 - 每天5分钟玩转 OpenStack(1)

    <每天5分钟玩转 OpenStack>是一个 OpenStack 教程,这是第 1 篇. 这个教程有下面两个特点: 系统讲解 OpenStack 从架构到各个组件:从整体到细节逐一讨论 重 ...