有很多提供动态创建 style 节点的方法，但是大多数都仅限于外部的 css 文件。如何能使用程序生成的字符串动态创建 style 节点，我搞了2个小时。 
静态外部 css 文件语法： 
@import url(style.css); 
动态外部 css 文件加载的方法有如下： 
第一种： 
var style = document.createElement(’link’);
style.href = ’style.css’;
style.rel = ’stylesheet’;
style.type = ‘text/css’;
document.getElementsByTagName(’HEAD’).item(0).appendChild(style); 
第二种简单： 
document.createStyleSheet(style.css); 
动态的 style 节点，使用程序生成的字符串： 
var style = document.createElement(’style’);
style.type = ‘text/css’;
style.innerHTML=”body{ }”;
document.getElementsByTagName(’HEAD’).item(0).appendChild(style); 
很遗憾，上面的代码在 ff 里面成功，但是 ie 不支持。从老外论坛得到代码： 
var sheet = document.createStyleSheet();
sheet.addRule(’body’,' 
成功，但是很麻烦，要把字符串拆开写，长一点的写死。 
接着搜，在一个不知道什么国家的什么语言的 blog 上找到代码： 
document.createStyleSheet(”javascript:’body{’”); 
成功，此人实在厉害，但是问题出来了，url 最大 255 个字符，长一点的就不行了，经过 SXPCrazy 提示，改成： 
window.style=”body{”;
document.createStyleSheet(”javascript:style”); 
完美解决！！代码: 
<html> 
<head> 
<script> 
function blue(){ 
if(document.all){ 
window.style="body{"; 
document.createStyleSheet("javascript:style"); 
}else{ 
var style = document.createElement('style'); 
style.type = 'text/css'; 
style.innerHTML="body{  
document.getElementsByTagName('HEAD').item(0).appendChild(style); 
} 
} 
</script> 
</head> 
<body> 
<input type="button" value="blue" onclick="blue();"/> 
</body> 
</html>

Javascript动态创建 style 节点的更多相关文章

  1. js动态创建style节点(js文件中添加css)

    ie6 不能 document.createElement('style') 然后append到head标签里.所以就找到这样个好文章 --------------------- 有很多提供动态创建 ...

  2. console.time 简单分析javascript动态加入Dom节点的性能

    Bullshit 本来想每天都更新下博客的,可是近期要考试,还有就是自己还是停留在暗自窃喜中吧(这样的想法要改变). 事实上近期总在想.自己要怎么去管理自己的数据,每天的生活都是对自己的数据的增删查改 ...

  3. JavaScript&&jQuery创建新节点和操作属性对比

    JavaScript创建新节点和操作属性 通过JavaScript原生接口创建节点,在处理上是非常复杂与繁琐的. <!DOCTYPE html> <html lang="e ...

  4. 利用javascript动态创建表格

    //说明:实现功能.原理上文相同.不过这次是利用已有的简单的方法创建行和列,并实现内容行鼠标移入变色功能! 效果图: /*两个方法 1.  trNode  table.insertRow(-1)    ...

  5. ArcGIS api for javascript——动态创建图层列表

    描述 本例循环地图服务里的所有图层并增加每个图层到一个带checkbox的列表,checkbox能设置图层的显示或隐藏.动态创建列表的优势是所有的图层都会包含在列表中,即使服务器管理员删除或增加了图层 ...

  6. javascript动态创建表格：新增、删除行和列

    转载:http://www.cnblogs.com/pato/archive/2009/09/02/1559068.html 利用js来动态创建表格有两种格式,appendChild()和insert ...

  7. javascript动态创建script标签,加载完成后调用回调

    代码如下: var head = document.getElementsByTagName('head')[0]; var script = document.createElement('scri ...

  8. JavaScript动态操作style

    1.易错:修改元素的样式不是设置class属性,而是className属性.class是JS的一个保留关键字. 2.易错:单独修改样式的属性使用"style.属性名"3.注意在cs ...

  9. jQuery动态创建DOM节点

    var SKU=$("#SKU"); // 通过ID查找到指定表格 var oTable=SKU[0]; // 获取第一个表格 // 获取正文tbody元素 var tBodies ...

随机推荐

  1. removeAll

    问题:无法移除2个集合中相同元素 方法:移除所包含的其所有元素. 在执行removeAll方法时,会先对集合元素进行比较,如果元素相等才执行移除操作,说到这,相信很多人都已经明白是怎么回事了,因为不相 ...

  2. VS2015中VB.NET类(dLL)里下载并读取文件

    最近要从一个http上下载个文件,差点就直接telnet了,突然发现了这个: My.Computer.Network.DownloadFile("目标文件网址") 但是还得读取它, ...

  3. C++ 中的 delete[] 机制剖析

    本文简单总结了delete[]放在析构函数中VS放在主函数中的区别(针对自己定义类). delete原理简单剖析(摘至https://zhidao.baidu.com/question/1540902 ...

  4. c#导入excel 绑定数据 repeat为例子

    先读取Excel文件并存到dataset public DataSet ExcelToDataTable(string filename, string strsheetname) { try { / ...

  5. 浅谈iOS程序员的成长和进阶

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

  6. 深入了解Unity中LineRenderer与TrailRenderer

    LineRender和TrailRender是两个好东西,很多Unity拖尾特效都会使用到它们.一些简单的介绍可以参见官方的API文档.在这里探讨一下它们具体的渲染方式,而后给出一些Shader以便更 ...

  7. 【Zookeeper】源码分析之请求处理链（四）

    一.前言 前面分析了SyncReqeustProcessor,接着分析请求处理链中最后的一个处理器FinalRequestProcessor. 二.FinalRequestProcessor源码分析 ...

  8. 每天一个linux命令(36)--vmstat命令

    vmstat 是 Virtual Memory Statistics(虚拟内存统计)的缩写,可对操作系统的虚拟内存.进程.CPU活动进行监控.他是对系统的整体情况进行统计,不足之处是无法对某个进程进行 ...

  9. 2017-3-2 C#基础 集合

    要使用集合必须先引用命名空间,using System.Collections; 集合与数组的不同: 数组:同一类型,固定长度集合:不同类型,不固定长度 集合主要分为六大类:普通集合,泛型集合,哈希表 ...

  10. FineUIMvc随笔 - 不能忘却的回发（__doPostBack）

    声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. 用户反馈 有网友在官方论坛抛出了这么一个问题,似乎对 FineUIMvc 中的浏览器端与服务器端的交互方式很有异议. 这里面的关 ...