有很多提供动态创建 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. CoreImage-python截取核心图片

    去年项目中用到的图片截取,所以使用python写了一个,分享给大家,欢迎批评指正. github地址:https://github.com/george518/CoreImage 作用 核心图片:是指 ...

  2. ElasticSearch5集群部署指南

    本文简要介绍ES5版本集群部署时的要点. 更多相关信息请参阅官网. 部分配置未在生产环境体现. 生产中2个集群20台centOS,总数据15TB,90亿条. 实时写入5000条/s, 最大7万/s. ...

  3. AKKA学习笔记

    AKKA学习笔记总结 01. AKKA 1. 介绍: Akka基于Actor模型,提供了一个用于构建可扩展的(Scalable).弹性的(Resilient).快速响应的(Responsive)应用程 ...

  4. c#入门系列——番外篇：vs的安装与使用

    vs的安装 1.安装条件          vs全称visual studio 它是一个开发平台,不仅可以用于c#开发,别的也可以.安装vs前,首先需要一个安装包.安装包可以在网上下载.没有购买版权的 ...

  5. C/C++中慎用宏(#define)

    宏的定义在程序中是非常有用的,但是使用不当,就会给自身造成很大的困扰.通常这种困扰为:宏使用在计算方面. 本例子主要是在宏的计算方面,很多时候,大家都知道定义一个计算的宏,对于编译和编程是多么的有用. ...

  6. React实例----一个表单验证比较复杂的页面

    前言:这阵子看了两本CSS的书~对于CSS层叠,定位,继承等机制基本上都了解了,就想着自己写几个页面~正好自己就写了写CSS样式,然后用React渲染出来~ 闲话不多说,简单说一说这个页面,希望能对大 ...

  7. php处理登录、添加数据、删除数据和修改数据

    php 处理登录 :需要先建一个登录的页面,用form表单就可以很轻松的完成,(这里的示例是我根据数据库现成的表做的 是一个teacher表格 根据老师的工号和姓名登录的) <form acti ...

  8. [Linux] - Linux下安装jdk，tar方式

    下载jdk的linux下版本,下载页面http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.ht ...

  9. Android开发8:数据存储（二）——SQLite数据库和ContentProvider的使用

    前言 啦啦啦各位小伙伴们许久不见了~学期末和过年期间自己忙着做其他事没能及时更新Android开发系列课程的博客,实在是罪过罪过~ 好啦~废话不多说,进入我们今天的主题.今天我们将和大家学习其他的数据 ...

  10. Linux系统（四）负载均衡LVS集群之NAT模式

    序言 提到LVS,就从章文嵩博士开始吧,反正也不知道如何下笔来写这一篇.章大博士,读博时候创建这个lvs软件项目,但是他提倡开源精神,在用户的建议和反馈中,这个花了他两周时间开发的开源软件不断得到改建 ...