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

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

赞 (0)

相关推荐

  • node.js中的http.response.getHeader方法使用说明

    方法说明: 读取已经列队但尚未发送给客户端的头信息. 语法: 复制代码 代码如下: response.getHeader(name) 接收参数: name          响应头的类型,注意这个名字是不区分大小写. 例子: 复制代码 代码如下: var contentType = response.getHeader('content-type');

  • JS代码放在head和body中的区别分析

    那么有什么不同呢?先看一个例子: 一个二级级联动态下拉列表框,一级分类(即大类别)id="vSort0". 复制代码 代码如下: <head> function changelocation(id) {----} </head> <body><select class="input1" id="vSort0" name="vSort0" onChange="changeloc

  • js放到head中失效的原因与解决方法

    1.今天写js碰到一个奇怪的问题,写好的js放到body里面执行,但是放到head中没有任何效果,为什么导致这种原因呢? 看失效代码: <!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/

  • JS使用ajax方法获取指定url的head信息中指定字段值的方法

    本文实例讲述了JS使用ajax方法获取指定url的head信息中指定字段值的方法.分享给大家供大家参考.具体分析如下: 下面的JS代码用来获取ajax_info.txt的head信息中的Last modified属性,最后修改时间 <!DOCTYPE html> <html> <head> <script> function loadXMLDoc(url) { var xmlhttp; if (window.XMLHttpRequest) {// code

  • node.js中的http.response.setHeader方法使用说明

    方法说明: 设置头文件信息. 如果将要发送的信息已包含头文件,执行该方法后头文件的值将被改写. 如果一个头文件需要传递多个值,可以使用数组. 语法: 复制代码 代码如下: response.setHeader(name, value) 接收参数: name          响应头的类型,注意这个名字是不区分大小写. value           响应头的值 例子: 复制代码 代码如下: response.setHeader("Content-Type", "text/ht

  • node.js中的http.response.removeHeader方法使用说明

    方法说明: 移除等待隐式发送的头. 语法: 复制代码 代码如下: response.removeHeader(name) 接收参数: name            响应头的类型,注意这个名字是不区分大小写. 例子: 复制代码 代码如下: response.removeHeader("Content-Encoding");

  • 动态加载Js代码到Head标签中的脚本

    复制代码 代码如下: HtmlGenericControl Include2 = new HtmlGenericControl("script"); Include2.Attributes.Add("type", "text/javascript"); Include2.InnerHtml = "alert('JavaScript in Page Header');"; this.Page.Header.Controls.Ad

  • node.js中的http.response.writeHead方法使用说明

    方法说明: 向请求的客户端发送响应头. 该函数在一个请求内最多只能调用一次,如果不调用,则会自动生成一个响应头. 语法: 复制代码 代码如下: response.writeHead(statusCode, [reasonPhrase], [headers]) 接收参数: statusCode              HTTP状态码,如200(请求成功),404(未找到)等. reasonPhrase headers                   类似关联数组的对象,表示响应头的每个属性

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

    本文实例讲述了JavaScript动态创建link标签到head里的方法.分享给大家供大家参考.具体分析如下: 相信有很多做前端的朋友碰到过需要用 JavaScript 动态创建样式表标签--link标签.这里我们就来说说如何在浏览器中动态创建link标签. 使用 jQuery 创建 link 标签 如果你开发中喜欢用jQuery,那么用jQuery在创建link标签应该是这样的: 复制代码 代码如下: var cssURL = '/style.css',     linkTag = $('<l

  • javascript动态创建表格及添加数据实例详解

    本文实例讲述了javascript动态创建表格及添加数据的方法.分享给大家供大家参考.具体分析如下: 1. 动态创建表格(代码不兼容IE6) <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>动态

  • Javascript动态创建表格及删除行列的方法

    本文实例讲述了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"

  • javascript动态创建链接的方法

    本文实例讲述了javascript动态创建链接的方法.分享给大家供大家参考.具体分析如下: 动态创建链接示例: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>动态添加链接</title&

  • JavaScript动态创建div等元素实例讲解

    JavaScript动态创建div等元素实例讲解

    本文实例讲解了JavaScript动态创建div等元素的详细代码,分享给大家供大家参考,具体内容如下 效果图: 为了节省时间,就直接贴代码了! <html> <head> <title>js动态创建div等元素实例</title> <style type="text/css"> </style> </head> <body> <script language="javascr

  • JavaScript动态创建form表单并提交的实现方法

    本文实例讲述了JavaScript动态创建form表单并提交的实现方法.分享给大家供大家参考,具体如下: 页面布局有些复杂的情况下,可能需要在页面中动态创建一个 form,JavaScript 创建 form 演示如下: // JavaScript 构建一个 form function MakeForm() { // 创建一个 form var form1 = document.createElement("form"); form1.id = "form1"; f

  • Javascript动态创建div的方法

    本文实例讲述了Javascript动态创建div的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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/xht

  • javascript动态创建及删除元素的方法

    本文实例讲述了javascript动态创建及删除元素的方法.分享给大家供大家参考.具体分析如下: 在DOM中我们可以方便快速的动态删除与删除dom元素,这里我们就来给各位朋友简单的介绍一下. 例1: 动态创建一个按钮 复制代码 代码如下: <html> <head> <title>动态创建按钮</title> <script language="javascript"> var a,b,ab,ba,c; function cr

  • JavaScript动态创建二维数组的方法示例

    JavaScript动态创建二维数组的方法示例

    本文实例讲述了JavaScript动态创建二维数组的方法.分享给大家供大家参考,具体如下: 学过C语言的我太耿直 一般这种情况下我会直接 var arr = new Array[10][10]; 但是不出意外的话这样是会报错的,因为在js中根本没有这样的语法 在这之前,让我们先来回顾一下js中是怎么样创建一维数组的: 使用数组直接量,这个是最简单的,在方括号内将数组元素用逗号隔开即可: var arr = [ ]; //空数组 var s = [1,2,3,4]; //4个元素的数组 var n

  • IE8中动态创建script标签onload无效的解决方法

    本文实例讲述了IE8中动态创建script标签onload无效的解决方法.分享给大家供大家参考.具体分析如下: 今天做项目,发现一个奇怪的问题,动态创建的script标签在IE8下无法触发onload事件. 代码如下: 复制代码 代码如下: var loadJs = function(src, fun){     var script = null;     script = document.createElement("script");     script.type = &qu

随机推荐