最近做一个项目，需要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. win10 系统下无法正常安装 Anaconda3

    最近国庆两天,突然心血来潮重装了一遍系统,重装成了win10系统以后毛病百出哇,昨天和今天一直在解决一个问题,那就是安装Anaconda3的时候出现不了快捷方式,如下图这样只有一个快捷方式(在win7 ...

  2. Javascript高级编程学习笔记（69）—— 事件（13）触摸与手势事件

    触摸与手势事件 由于移动设备既没有鼠标也没有键盘,所以在为移动浏览器开发交互性网页时,常规的鼠标键盘事件根本不够用 所以早期的苹果为Safari 添加了一些与触摸相关的事件 随着后面Android的W ...

  3. 第89节：Java中的反射技术

    第89节:Java中的反射技术 反射技术是动态的获取指定的类,和动态的调用类中的内容(没有类前就可以创建对象,将对象的动作完成,这就是动态的获取指定的类). 配置文件把具体实现的类名称定义到配置文件中 ...

  4. python读取pdf文件

    pdfplumber简介 Pdfplumber是一个可以处理pdf格式信息的库.可以查找关于每个文本字符.矩阵.和行的详细信息,也可以对表格进行提取并进行可视化调试. 文档参考https://gith ...

  5. python(leetcode)-重复元素算法题

    leetcode初级算法 问题描述 给定一个整数数组,判断是否存在重复元素. 如果任何值在数组中出现至少两次,函数返回 true.如果数组中每个元素都不相同,则返回 false. 该问题表述非常简单 ...

  6. mongo 字段重命名

    执行语句 db.getCollection("A表").updateMany( {}, { $rename: { "A": "A1"} } ...

  7. Kibana简单使用教程

    ELK平台日志查看教程 1. 访问地址:http://xxx:5601/app/kibana 我们主要使用的是右边Discover功能,默认显示的是183tpp(可设置)最近15分钟日志信息. 2. ...

  8. stack源码

    stack概述 stack是一种先进后出的数据结构,它只有一个出口,允许新增元素.移除元素.取得最顶端元素,但每次只能处理顶端元素,也就是说,stack不允许遍历行为. stack定义 以某种既有容器 ...

  9. IdentityServer4（5）- 包和构建

    包和构建 IdentityServer有许多Nuget包组件 IdentityServer4 nuget | github 包含IdentityServer核心对象模型.服务和中间件.默认只包含了基于 ...

  10. Java代码更改shape和selector文件的颜色值

    Android里面经常会使用shape或者selector来定制一些View的背景.那么如果想要动态更改shape或者seletor文件中的颜色值,该怎么处理呢? 一.Java代码更改shape的颜色 ...