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 相关文章推荐
简明json介绍
Sep 28 Javascript
JS中setTimeout()的用法详解
Apr 14 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
Mar 12 Javascript
js实现的tab标签切换效果代码分享
Aug 25 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
Aug 31 Javascript
轻松实现Bootstrap图片轮播
Apr 20 Javascript
Vue应用部署到服务器的正确方式
Jul 15 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
Vue组件全局注册实现警告框的实例详解
Jun 11 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
Apr 02 Javascript
详解Angular cli配置过程记录
Nov 07 Javascript
jquery向后台提交数组的代码分析
Feb 20 jQuery
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处理excel cvs表格的方法实例介绍
2013/05/13 PHP
输入值/表单提交参数过滤有效防止sql注入的方法
2013/12/25 PHP
PHP检测用户语言的方法
2015/06/15 PHP
php验证码生成代码
2015/11/11 PHP
PHP实现百度人脸识别
2019/05/06 PHP
关于Curl在Swoole协程中的解决方案详析
2019/09/12 PHP
学习YUI.Ext基础第一天
2007/03/10 Javascript
jQuery 打造动态渐变按钮 详细图文教程
2010/04/25 Javascript
js substr支持中文截取函数代码(中文是双字节)
2013/04/17 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
2014/02/11 Javascript
jQuery设置与获取HTML,文本和值的简单实例
2014/02/26 Javascript
jQuery动画特效实例教程
2014/08/29 Javascript
NodeJS Web应用监听sock文件实例
2015/02/18 NodeJs
AngularJS模块管理问题的非常规处理方法
2015/04/29 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
2015/06/01 Javascript
跟我学习javascript的prototype原型和原型链
2015/11/18 Javascript
js实现的星星评分功能函数
2015/12/09 Javascript
JavaScrpt判断一个数是否是质数的实例代码
2017/06/11 Javascript
5个你不知道的JavaScript字符串处理库(小结)
2020/06/01 Javascript
[02:23]2016国际邀请赛中国区预选赛wings晋级之路
2016/06/29 DOTA
python网络编程学习笔记(九):数据库客户端 DB-API
2014/06/09 Python
Python增量循环删除MySQL表数据的方法
2016/09/23 Python
Python使用googletrans报错的解决方法
2018/09/25 Python
Pycharm连接远程服务器并实现远程调试的实现
2019/08/02 Python
使用python创建生成动态链接库dll的方法
2020/05/09 Python
校园新闻广播稿
2014/01/10 职场文书
推荐信格式要求
2014/05/09 职场文书
植树节口号
2014/06/21 职场文书
小学六一儿童节活动方案
2014/08/27 职场文书
忠诚奉献演讲稿
2014/09/12 职场文书
仲裁协议书
2014/09/26 职场文书
搞笑的爱情检讨书
2014/10/01 职场文书
2015大学生自我评价范文
2015/03/03 职场文书
你为什么是穷人?可能是这5个缺点造成
2019/07/11 职场文书
诺贝尔奖获得者名言100句:句句启人心智,值永久收藏
2019/08/09 职场文书
淡雅古典唯美少女娇媚宁静迷人写真
2022/03/21 杂记