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 相关文章推荐
拖动table标题实现改变td的大小(css+js代码)
Apr 16 Javascript
jquery创建表格(自动增加表格)代码分享
Dec 25 Javascript
JQuery插入DOM节点的方法
Jun 11 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
Aug 10 Javascript
jQuery 3.0 的 setter和getter 模式详解
Jul 11 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
Dec 27 Javascript
bootstrap中添加额外的图标实例代码
Feb 15 Javascript
require.js中的define函数详解
Jul 10 Javascript
vue实现分页组件
Jun 16 Javascript
什么时候不能在 Node.js 中使用 Lock Files
Jun 24 Javascript
vue实现户籍管理系统
May 29 Javascript
Vue双向数据绑定(MVVM)的原理
Oct 03 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与javascript对多项选择的处理
2006/10/09 PHP
PHP递归删除目录几个代码实例
2014/04/21 PHP
laravel5环境隐藏index.php后缀(apache)的方法
2019/10/12 PHP
Highslide.js是一款基于js实现的网页中图片展示插件
2020/03/30 Javascript
jquery Mobile入门—多页面切换示例学习
2013/01/08 Javascript
JS实现向表格行添加新单元格的方法
2015/03/30 Javascript
javascript实现给定半径求出圆的面积
2015/06/26 Javascript
javascript判断回文数详解及实现代码
2017/02/03 Javascript
JS库之Highlight.js的用法详解
2017/09/13 Javascript
使用vue的transition完成滑动过渡的示例代码
2018/06/25 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
2018/08/30 Javascript
微信小程序实现蒙版弹窗效果
2018/11/01 Javascript
node app 打包工具pkg的具体使用
2019/01/17 Javascript
react ant Design手动设置表单的值操作
2020/10/31 Javascript
python Django连接MySQL数据库做增删改查
2013/11/07 Python
详解Python字典的操作
2019/03/04 Python
Python实现的多进程拷贝文件并显示百分比功能示例
2019/04/09 Python
python实现桌面托盘气泡提示
2019/07/29 Python
详解Python time库的使用
2019/10/10 Python
python中seaborn包常用图形使用详解
2019/11/25 Python
Python中logging日志记录到文件及自动分割的操作代码
2020/08/05 Python
Python Selenium自动化获取页面信息的方法
2020/08/31 Python
Python列表推导式实现代码实例
2020/09/09 Python
Django生成数据库及添加用户报错解决方案
2020/10/09 Python
Python使用windows设置定时执行脚本
2020/11/12 Python
用python批量下载apk
2020/12/29 Python
校园歌咏比赛主持词
2014/03/18 职场文书
2014迎国庆标语大全
2014/09/19 职场文书
2014年政工师工作总结
2014/12/18 职场文书
房产公证书样本
2015/01/23 职场文书
个人委托书范文
2015/01/28 职场文书
大明湖导游词
2015/02/03 职场文书
房地产置业顾问工作总结
2015/10/23 职场文书
redis客户端实现高可用读写分离的方式详解
2021/07/04 Redis
详解MySQL中timestamp和datetime时区问题导致做DTS遇到的坑
2021/12/06 MySQL
Python实现Matplotlib,Seaborn动态数据图
2022/05/06 Python