JavaScript动态创建link标签到head里的方法


Posted in Javascript onDecember 22, 2014

本文实例讲述了JavaScript动态创建link标签到head里的方法。分享给大家供大家参考。具体分析如下:

相信有很多做前端的朋友碰到过需要用 JavaScript 动态创建样式表标签——link标签。这里我们就来说说如何在浏览器中动态创建link标签。

使用 jQuery 创建 link 标签

如果你开发中喜欢用jQuery,那么用jQuery在创建link标签应该是这样的:

var cssURL = '/style.css',

    linkTag = $('<link href="' + cssURL + '" rel="stylesheet" type="text/css" media="' + (media || "all") + '" charset="'+ charset || "utf-8" +'" />');

// 请看清楚,是动态将link标签添加到head里   

$($('head')[0]).append(linkTag);

使用原生 JavaScript 创建 link 标签

如果你喜欢纯天然的 JavaScript,就要需要这么写:

var head = document.getElementsByTagName('head')[0],

    cssURL = '/style.css',

    linkTag = document.createElement('link');

 

    linkTag.id = 'dynamic-style';

 linkTag.href = cssURL;

 linkTag.setAttribute('rel','stylesheet');

 linkTag.setAttribute('media','all');

 linkTag.setAttribute('type','text/css');

 

head.appendChild(linkTag);

IE 里特有的方法 createStyleSheet

IE 里特有的方法 createStyleSheet 方法也是很方便。

var head = document.getElementsByTagName('head')[0],

    cssURL = 'themes/BlueNight/style.css',

 // document.createStyleSheet 的同时就已经把link标签添加到了head中了,怎么讲呢,倒是挺方便

    linkTag = document.createStyleSheet(cssURL);

createStyleSheet( [sURL] [, iIndex])方法接受两个参数,sURL就是CSS文件的URL路径。iIndex 为可选参数,指插入的link在页面中stylesheets collection的索引位置,默认是在最后添加新创建的样式。

完整的解决方案

基本上都介绍完了,来看看完整的解决方案吧:

function createLink(cssURL,lnkId,charset,media){ 

var head = $($('head')[0]),

    linkTag = null;

 

 if(!cssURL){

     return false;

 }

 

 linkTag = $('<link href="' + cssURL + '" rel="stylesheet" type="text/css" media="' + (media || "all") + '" charset="'+ charset || "utf-8" +'" />');

  

 head.append(linkTag);

}

function createLink(cssURL,lnkId,charset,media){ 

    var head = document.getElementsByTagName('head')[0],

        linkTag = null;

  

 if(!cssURL){

     return false;

 }

    

 linkTag = document.createElement('link');

 linkTag.setAttribute('id',(lnkId || 'dynamic-style'));

 linkTag.setAttribute('rel','stylesheet');

 linkTag.setAttribute('charset',(charset || 'utf-8'));

 linkTag.setAttribute('media',(media||'all'));

 linkTag.setAttribute('type','text/css');

    linkTag.href = cssURL; 

 

    head.appendChild(linkTag); 

}

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

Javascript 相关文章推荐
JavaScript 开发中规范性的一点感想
Jun 23 Javascript
jquery multiSelect 多选下拉框
Jul 09 Javascript
jquery键盘事件介绍
Jan 31 Javascript
向当前style sheet中插入一个新的style实现方法
Apr 01 Javascript
Javascript脚本实现静态网页加密实例代码
Nov 05 Javascript
JQUERY表单暂存功能插件分享
Feb 23 Javascript
jQuery点击导航栏选中更换样式的实现代码
Jan 23 Javascript
javascript 显示全局变量与隐式全局变量的区别
Feb 09 Javascript
微信小程序实战之自定义抽屉菜单(7)
Apr 18 Javascript
vue2.x select2 指令封装详解
Oct 12 Javascript
深入浅出 Vue 系列 -- 数据劫持实现原理
Apr 23 Javascript
Vue发布订阅模式实现过程图解
Apr 30 Javascript
javascript中Date对象的getDay方法使用指南
Dec 22 #Javascript
原生javaScript实现图片延时加载的方法
Dec 22 #Javascript
使用JavaScript链式编程实现模拟Jquery函数
Dec 21 #Javascript
使用jQuery简单实现模拟浏览器搜索功能
Dec 21 #Javascript
编写简单的jQuery提示插件
Dec 21 #Javascript
不使用ajax实现无刷新提交表单
Dec 21 #Javascript
webapp框架AngularUI的demo改造之路
Dec 21 #Javascript
You might like
php写的带缓存数据功能的mysqli类
2012/09/06 PHP
用PHP编写和读取XML的几种方式
2013/01/12 PHP
hadoop常见错误以及处理方法详解
2013/06/19 PHP
php类的定义与继承用法实例
2015/07/07 PHP
JavaScript语法着色引擎(demo及打包文件下载)
2007/06/13 Javascript
理解Javascript_01_理解内存分配原理分析
2010/10/11 Javascript
jquery easyui滚动条部分设置介绍
2013/09/12 Javascript
页面实时更新时间的JS实例代码
2013/12/18 Javascript
jQuery窗口、文档、网页各种高度的精确理解
2014/07/02 Javascript
js实现鼠标感应图片展示的方法
2015/02/27 Javascript
ionic实现可滑动的tab选项卡切换效果
2020/04/15 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
2016/11/25 Javascript
浅谈在koa2中实现页面渲染的全局数据
2017/10/09 Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
2017/11/07 Javascript
解决JavaScript layui 下拉框不显示的问题
2018/08/14 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
2019/03/15 Javascript
微信小程序下拉框搜索功能的实现方法
2019/07/31 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
2019/08/16 Javascript
功能完善的小程序日历组件的实现
2020/03/31 Javascript
对于Python装饰器使用的一些建议
2015/06/03 Python
Python2.7编程中SQLite3基本操作方法示例
2017/08/09 Python
Django 配置多站点多域名的实现步骤
2019/05/17 Python
pip install 使用国内镜像的方法示例
2020/04/03 Python
C#面试常见问题
2013/02/25 面试题
毕业生物理教师求职信
2013/10/17 职场文书
不服从上级领导安排的检讨书
2014/09/14 职场文书
2014年个人债务授权委托书范本
2014/09/22 职场文书
2014年初中班主任工作总结
2014/11/08 职场文书
2014年环境整治工作总结
2014/12/10 职场文书
文员岗位职责范本
2015/04/16 职场文书
2015年党员创先争优公开承诺书
2015/04/27 职场文书
2015银行年终工作总结范文
2015/05/26 职场文书
工商行政处罚决定书
2015/06/24 职场文书
食品卫生管理制度
2015/08/06 职场文书
爱护公物主题班会
2015/08/17 职场文书
MySQL 原理与优化之Update 优化
2022/08/14 MySQL