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

 更新时间:2014年12月22日 09:02:46   投稿:shichen2014  
这篇文章主要介绍了JavaScript动态创建link标签到head里的方法,分别介绍了使用jQuery的方法、使用原生javascript方法与IE特有的createStyleSheet方法等,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

相关文章

  • js实现GIF图片的分解和合成

    js实现GIF图片的分解和合成

    这篇文章主要为大家详细介绍了js实现GIF图片的分解和合成,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10
  • 关闭ie窗口清除Session的解决方法

    关闭ie窗口清除Session的解决方法

    本篇文章主要是对关闭ie窗口清除Session的解决方法进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • javascript中字符串拼接需注意的问题

    javascript中字符串拼接需注意的问题

    作为一名.net开发人员相信大家都知道C#中字符串拼接与StringBuilder的效率差距。
    2010-07-07
  • 浅析JavaScript中命名空间namespace模式

    浅析JavaScript中命名空间namespace模式

    namespace即“命名空间”,也称“名称空间” 、”名字空间”。接下来通过本文给大家介绍JavaScript中命名空间namespace模式的相关知识,非常不错,具有参考借鉴价值,感兴趣的朋友一起学习吧
    2016-06-06
  • 微信小程序实现日历签到

    微信小程序实现日历签到

    这篇文章主要为大家详细介绍了微信小程序实现日历签到功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • 用javascript实现检测指定目录是否存在的方法

    用javascript实现检测指定目录是否存在的方法

    今天看到一篇关于onegreen被挂马的代码发现这个函数,它用js就可以检测,制定的目录或指定的文件是否存在,一般用来读chm文件中的图片来检测,目录的存在。高手就是不学好。
    2008-01-01
  • 前端双token无感刷新图文详解

    前端双token无感刷新图文详解

    实现token无感刷新对于前端来说是一项十分常用的技术,这篇文章主要给大家介绍了关于前端双token无感刷新的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-09-09
  • 微信公众平台开发教程(五)详解自定义菜单

    微信公众平台开发教程(五)详解自定义菜单

    这篇文章主要介绍了微信公众平台开发教程(五)详解自定义菜单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2016-12-12
  • js模拟画笔效果

    js模拟画笔效果

    非常不错的效果,模板画笔,代码相对较少
    2008-10-10
  • TypeScript命名空间合并讲解

    TypeScript命名空间合并讲解

    这篇文章主要介绍了TS命名空间合并讲解,回顾上一节的内容,在上一节中我们介绍了TS中最常见的声明合并:接口合并,今天要讲的内容也是TS中的声明合并,但这次是命名空间相关的合并,需要的朋友可以参考一下
    2021-12-12

最新评论