JavaScript动态加载样式表的方法

本文实例讲述了JavaScript动态加载样式表的方法。分享给大家供大家参考。具体如下：

如果需要更换皮肤，我们可以通过JS代码动态加载皮肤的样式表，下面的代码就可以做到，非常简单，你只需要把这段代码做成函数动态调用即可。

var el = document.createElement('link');
el.rel = 'stylesheet';
el.type = 'text/css';
el.href = 'http://www.jb51.net/...' + 'styles.css';
document.body.appendChild(el);

希望本文所述对大家的javascript程序设计有所帮助。

赞 (0)

相关推荐

  • js加载之使用DOM方法动态加载Javascript文件

    js加载之使用DOM方法动态加载Javascript文件

    传统上,加载Javascript文件都是使用<script>标签. 就像下面这样: <script type="text/javascript" src="example.js"></script> <script>标签很方便,只要加入网页,浏览器就会读取并运行.但是,它存在一些严重的缺陷. (1)严格的读取顺序.由于浏览器按照<script>在网页中出现的顺序,读取Javascript文件,然后立即运行,

  • JavaScript 动态加载脚本和样式的方法

    一 动态脚本 当网站需求变大,脚本的需求也逐步变大;我们不得不引入太多的JS脚本而降低了整站的性能; 所以就出现了动态脚本的概念,在适时的时候加载相应的脚本; 1.动态引入js文件 var flag = true; if(flag){ loadScript('browserdetect.js'); // 调用函数,引入路径; } function loadScript(url){ var script = document.createElement('script'); // 创建script

  • javascript实现动态导入js与css等静态资源文件的方法

    本文实例讲述了javascript实现动态导入js与css等静态资源文件的方法.分享给大家供大家参考.具体实现方法如下: /** * 动态导入静态资源文件js/css */ var $import = function(){ return function(rId, res, callback){ if(res && 'string' == typeof res){ if(rId){ if($($('#' + rId), $('head')).length>0){ return; }

  • 用javascript将数据导入Excel示例代码

    网上收集的代码 <input type="button" name="out_excel" onclick="AutomateExcel();" value="导出到excel" class="notPrint"> 导出到Excel代码 <SCRIPT LANGUAGE="javascript"> <!-- function AutomateExcel()

  • javascript实现动态加载CSS

    复制代码 代码如下: <script type="text/javascript">             function addStyle(stylePath) {                 var container = document.getElementsByTagName("head")[0];                 var addStyle = document.createElement("link"

  • 动态加载外部javascript文件的函数代码分享

    复制代码 代码如下: (function (clover) { clover.loadScript = function loadScript(url, callback) { var heads = document.getElementsByTagName('head'); if (heads.length == 0) { alert("page must have one head element"); } var head = heads[0]; var script = do

  • 非阻塞动态加载javascript广告实现代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • JavaScript动态加载样式表的方法

    本文实例讲述了JavaScript动态加载样式表的方法.分享给大家供大家参考.具体如下: 如果需要更换皮肤,我们可以通过JS代码动态加载皮肤的样式表,下面的代码就可以做到,非常简单,你只需要把这段代码做成函数动态调用即可. var el = document.createElement('link'); el.rel = 'stylesheet'; el.type = 'text/css'; el.href = 'http://www.jb51.net/...' + 'styles.css';

  • IE8中使用javascript动态加载CSS的解决方法

    众所周知做前端开发的都恨不得踹IE开发者几脚,IE开发者名声之差不低于GFW开发者,昧着良心搞坏市场,人人得而诛之,但是在中国这些地方市场占有率摆在那里,没办法只能向现实低头. 最近我们产品需要在浏览器里动态载入一段CSS,以前的代码是直接用的: 复制代码 代码如下: var bubbleCss = document.createElement('style');bubbleCss.type = 'text/css';bubbleCss.innerHTML = blc_conf.bubbleSt

  • jquery及js实现动态加载js文件的方法

    本文实例讲述了jquery及js实现动态加载js文件的方法.分享给大家供大家参考,具体如下: 问题: 如果用jquery append直接加载script标签的话,会报错的.除了document.write外,还有没有其他的比较好的动态加载js文件的方法. 解决方法: 1.jquery方法 $.getScript("./test.js"); //加载js文件 $.getScript("./test.js",function(){ //加载test.js,成功后,并执

  • 使用javaScript动态加载Js文件和Css文件

    JS动态加载CSS 在可换主题的界面中具有很重要的意义,用户可以根据自己的浏览习惯选择自己喜欢的页面显示方式,下面详细说明. 希望下面的方法对你有帮助. (1)使用JavaScript动态加载Js文件 /*JavaScript动态加载Js文件*/ var scriptNode = document.createElement('script'); scriptNode.src = 'proxy.js?t='+new Date().getTime();/*附带时间参数,防止缓存*/ documen

  • JS动态加载当前时间的方法

    本文实例讲述了JS动态加载当前时间的方法.分享给大家供大家参考.具体实现方法如下: <body bgcolor="#fef4d9" onload ="time()"> <script language="JavaScript"> function time () { var now = new Date(); var yr = now.getYear(); var mName = now.getMonth() + 1; v

  • javascript动态加载二

    在上一篇javascript动态加载中,提到了使用同步加载策略这一个方式来实现如 复制代码 代码如下: Using("jquery"); Using("User"); $("#ID").click(function(){ var user = new User(); user.name = "xx"; user.show(); }); 由于JS是单线程的,所以同步策略带来的坏处不少,比如阻止之后的代码运行.造成浏览器假死等问题

  • 如何实现JavaScript动态加载CSS和JS文件

    项目中需要用到动态加载CSS 文件,整理了一下,顺便融合了动态加载JS 的功能写成了一个对象,先上代码: var dynamicLoading = { css: function(path){ if(!path || path.length === 0){ throw new Error('argument "path" is required !'); } var head = document.getElementsByTagName('head')[0]; var link =

  • jquery动态加载js三种方法实例

    复制代码 代码如下: <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="

  • JavaScript动态加载重复绑定问题

    JavaScript动态加载重复绑定问题

    前言 在添加一条数据时,使用动态加载显示在界面,后来发现一个严重的bug,拿我做的这个便签为例,当我添加一条数据后,然后点击删除的时候,提示是否删除,如下图: 但是当我添加两条以上的数据时,删除第几条就会提示几次是否确认删除. 经过排查,终于发现问题所在. 正文 当动态添加内容后,通常会写上添加的这些div中需要用到的事件,比如click事件/chang事件等.还拿我的删除事件为例,由于删除事件必须写在添加便签的事件下,所以当添加第一条数据时,绑定一次,添加第二条时,绑定一次,添加第n条数据时,

随机推荐