最近做一个项目，需要javascript动态插入样式，结果以前的方法失效了！查了2个小时的原因竟然是自己手贱，这个最后再说！

javascript插入样式在前端开发中应用比较广泛，特别是在修改前端表现和页面换肤的时候。最近做的这个任务是用户在别人的站点上点击一个按钮，就会在别的站点页面下插入一个脚本，执行，这其中包含了样式的插入。

一般情况下javascript动态插入样式有两种，一种页面中引入外部样式,在<head>中使用<link>标签引入一个外部样式文件，另一种是在页面中使用<style>标签插入页面样式（这里说的不是style属性）。

一、页面中引入外部样式：

在<head>中使用<link>标签引入一个外部样式文件，这个比较简单，各个主流浏览器也不存在兼容性问题：

复制代码代码如下:
function includeLinkStyle(url) {

 var link = document.createElement("link");

 link.rel = "stylesheet";

 link.type = "text/css";

 link.href = url;

 document.getElementsByTagName("head")[0].appendChild(link);

}

includeLinkStyle("");

　　

但是在我目前做的这个项目中本身应用的样式非常少，直接用引入一个外部样式文件似乎不合适，所以我选择了第二种方案，在页面中使用<style>标签插入页面样式。

二、使用<style>标签插入页面样式：

这种方式在各个主流浏览器存在兼容性问题，像firefox等标准浏览器无法直接获取设置styleSheet的cssText值，标准浏览器下只能使用document.styleSheets[0].cssRules[0].cssText单个获取样式；同时使用：document.styleSheets[0].cssRules[0].cssText=newcssText；页面不会自动更新样式，必须使用：document.styleSheets[0].cssRules[0].style.cssText=newcssText；这点似乎没坑爹的IE来的人性化和简便。YUI中使用了一个很好的办法：style.appendChild(document.createTextNode(styles));采用createTextNode将样式字符串添加到<style>标签内；

复制代码代码如下:
function includeStyleElement(styles, styleId) {

    if (document.getElementById(styleId)) {

        return

    }

    var style = document.createElement("style");

    style.id = styleId;

    //这里最好给ie设置下面的属性

    /*if (isIE()) {

style.type = "text/css";

style.media = "screen"

}*/

    (document.getElementsByTagName("head")[0] || document.body).appendChild(style);

    if (style.styleSheet) { //for ie

        style.styleSheet.cssText = styles;

    } else { //for w3c

        style.appendChild(document.createTextNode(styles));

    }

}

var styles = "#div{ color:#FFFFFF }";

includeStyleElement(styles, "newstyle");

　　

这样页面中的元素就能直接应用css样式了，不管你的这些元素是不是通过脚本追加的。

关于手贱：

看这段代码：

复制代码代码如下:
var divObj = document.createElement("div");

divObj.id = "__div";

divObj.innerHTML = "测试js插入DOM和样式";

document.body.appendChild(divObj);

var styles = "#__div{ color:#FFFFFF }";

includeStyleElement(styles, "newstyle");

　　

前面说了这个项目是用户在别人的站点上点击一个按钮，就会在别的站点页面下插入一个脚本，执行，这其中包含了样式的插入，我为了尽可能的保证我创建的元素ID唯一性，手贱在元素ID前加了“__”,表示私有防止冲突。结果悲剧了，IE6，IE7 class和id的命名不能以下划线开头（“_”），竟然把这个给忘了！花了两个小时才找到原因。悲剧啊！得出一个结论！做前端代码千万不能手贱！

Javascript动态引用CSS文件的2种方法介绍的更多相关文章

  1. [转载]C#读写txt文件的两种方法介绍

    C#读写txt文件的两种方法介绍 by 大龙哥 1.添加命名空间 System.IO; System.Text; 2.文件的读取 (1).使用FileStream类进行文件的读取,并将它转换成char ...

  2. C#读写txt文件的两种方法介绍

    C#读写txt文件的两种方法介绍 1.添加命名空间 System.IO; System.Text; 2.文件的读取 (1).使用FileStream类进行文件的读取,并将它转换成char数组,然后输出 ...

  3. C#读写txt文件的两种方法介绍[转]

    C#读写txt文件的两种方法介绍 1.添加命名空间 System.IO; System.Text; 2.文件的读取 (1).使用FileStream类进行文件的读取,并将它转换成char数组,然后输出 ...

  4. C#读写txt文件的两种方法介绍 v

    C#读写txt文件的两种方法介绍 1.添加命名空间 System.IO; System.Text; 2.文件的读取 (1).使用FileStream类进行文件的读取,并将它转换成char数组,然后输出 ...

  5. PHP读取大文件的几种方法介绍

    读取大文件一直是一个头痛的问题,我们像使用php开发读取小文件可以直接使用各种函数实现,但一到大文章就会发现常用的方法是无法正常使用或时间太长太卡了,下面我们就一起来看看关于php读取大文件问题解决办 ...

  6. CSS 文件的4种引入方式

    (1)链接式  : 在网页的<head></head>标签对中使用<link>标记来引入外部样式表文件,使用html规则引入外部css  (用得比较多) : < ...

  7. 前端js,css文件合并三种方式,bat命令

    前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...

  8. HTML 引用Css样式的四种方式

    不才,只知道HTML引用CSS样式有四种方式,内部引用和外部引用各两种,因为老是忘记细节,记下了随时翻阅亦可方便如我般的初学者 内部引用方式1: 直接在标签内用 style 引用,如: <div ...

  9. 在SharePoint解决方案中使用JavaScript (1) – 引用.js文件

    本文是系列文章的第一篇. 在SharePoint解决方案中使用JavaScript (0) 作为在SharePoint应用程序中使用JavaScript的第一步,就是要知道如何将一个写好的.js文件, ...

随机推荐

  1. 程序员跳槽有一份好的简历，offer让你拿到手软

    作者:果汁简历 工欲善其事必先利其器,这是自古以来的道理,所以如果想找到一份好的工作,一定要先整理一份好的简历. 模板 写简历首先要有一个好的模板,我们做技术的不同于 UX,UED,我们不需要那么花哨 ...

  2. Go语言数组

    目录 声明数组 数组在内存的结构 初始化数组 使用数组 函数间传递数组 数组使用注意事项 数组是具有相同唯一类型的一组已编号且长度固定的数据项序列(这是一种同构的数据结构);这种类型可以是任意的原始类 ...

  3. Python学习笔记【第四篇】：基本数据类型

    变量:处理数据的状态 变量名 = 状态值 类型 python中有以下基本数据类型: 1:整形 2:字符串类型 3:Bool类型 4:列表 5:元祖(不可变) 6:字典(无序) 7:集合 (无序.不重复 ...

  4. Spark基础-scala学习（二、面向对象）

    面向对象编程之类 //定义一个简单的类 scala> :paste // Entering paste mode (ctrl-D to finish) //类默认public的 class He ...

  5. Dockerfile常用指令

    FROM 构建的新镜像基于那个镜像 , FROM ubuntu:14 MAINTAINER 镜像维护者姓名或邮箱地址 RUN CMD EXPOSE  声明容器运行服务的端口 ENV ADD  拷贝文件 ...

  6. 如何将一个文本内容通过PHP 以表格的方式输入到页面上

    如何将一个文本内容通过PHP 以表格的方式输入到页面上 <?php //读取文本内容 $contents = file_get_contents("names.txt"); ...

  7. python学习笔记01-变量

    变量的作用: 1.保存信息  方便日后被调用 操作 2. 更改 代表描述性的意思 让人明白是什么意思 行业命名规则: 1.student_number 2.studentNumber 驼峰体 不要以大 ...

  8. Jenkins系列之四——设置邮件通知

    Jenkins持续集成,当我们自动打包部署完,我们可以发送一封邮件给相关的负责人.现介绍一下如何在Jenkins中配置实现邮件通知. 在Jenkins中配置实现邮件通知,Jenkins提供了两种方式的 ...

  9. 如何将云原生工作负载映射到 Kubernetes 中的控制器

    作者:Janakiram MSV 译者:殷龙飞 原文地址:https://thenewstack.io/how-to-map-cloud-native-workloads-to-kubernetes- ...

  10. sql server 备份与恢复系列三 简单恢复模式下的备份与还原

    一.概述 前面讲了备份的一些理论知识,这篇开始讲在简单恢复模式下的备份与还原.在简单模式下是不能做日志备份的,发生灾难后,数据库最后一次备份之后做的数据修改将是全部丢失的,所以在生产环境下,数据又很重 ...