Javascript动态创建 style 节点
有很多提供动态创建 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 节点的更多相关文章
- js动态创建style节点(js文件中添加css)
ie6 不能 document.createElement('style') 然后append到head标签里.所以就找到这样个好文章 --------------------- 有很多提供动态创建 ...
- console.time 简单分析javascript动态加入Dom节点的性能
Bullshit 本来想每天都更新下博客的,可是近期要考试,还有就是自己还是停留在暗自窃喜中吧(这样的想法要改变). 事实上近期总在想.自己要怎么去管理自己的数据,每天的生活都是对自己的数据的增删查改 ...
- JavaScript&&jQuery创建新节点和操作属性对比
JavaScript创建新节点和操作属性 通过JavaScript原生接口创建节点,在处理上是非常复杂与繁琐的. <!DOCTYPE html> <html lang="e ...
- 利用javascript动态创建表格
//说明:实现功能.原理上文相同.不过这次是利用已有的简单的方法创建行和列,并实现内容行鼠标移入变色功能! 效果图: /*两个方法 1. trNode table.insertRow(-1) ...
- ArcGIS api for javascript——动态创建图层列表
描述 本例循环地图服务里的所有图层并增加每个图层到一个带checkbox的列表,checkbox能设置图层的显示或隐藏.动态创建列表的优势是所有的图层都会包含在列表中,即使服务器管理员删除或增加了图层 ...
- javascript动态创建表格：新增、删除行和列
转载:http://www.cnblogs.com/pato/archive/2009/09/02/1559068.html 利用js来动态创建表格有两种格式,appendChild()和insert ...
- javascript动态创建script标签,加载完成后调用回调
代码如下: var head = document.getElementsByTagName('head')[0]; var script = document.createElement('scri ...
- JavaScript动态操作style
1.易错:修改元素的样式不是设置class属性,而是className属性.class是JS的一个保留关键字. 2.易错:单独修改样式的属性使用"style.属性名"3.注意在cs ...
- jQuery动态创建DOM节点
var SKU=$("#SKU"); // 通过ID查找到指定表格 var oTable=SKU[0]; // 获取第一个表格 // 获取正文tbody元素 var tBodies ...
随机推荐
- 文件下载类型__response
response.setContentType(MIME)的作用是使客户端浏览器,区分不同种类的数据,并根据不同的MIME调用浏览器内不同的程序嵌入模块来处理相应的数据. 例如web浏览器就是通过MI ...
- Oracle DataGuard 升级 [11.2.0.1 -> 11.2.0.4]
Oracle DataGuard 升级 [11.2.0.1 -> 11.2.0.4] Primary: 11.2.0.1 单机,Site A. Standby: 11.2.0.1 单机,Site ...
- 进程——wait与waitpid、僵尸进程与孤儿进程
僵尸进程:子进程终止了,但是父进程没有回收子进程的资源PCB.使其成为僵尸进程 孤儿进程:父进程先与子进程结束了,使得子进程失去了父进程,这个时候子进程会被1号进程init进程领养,成为孤儿进程 为了 ...
- oracle 11G RAC会话故障转移测试
目前接手的几个项目中,默认使用的oracle RAC数据库服务,均不能实现自动的会话转移,尤其是对于应用的长连接,一旦发生数据库故障,需要重启应用.实际11G具备会话迁移机制,为此做了如下配置测试,供 ...
- 使用nat方式解决虚拟机联网问题
本文全文参考:http://jingyan.baidu.com/album/4e5b3e1957979d91901e24f1.html?picindex=1,谢谢 对于很多的linux初学者来说,最开 ...
- matlab 利用while循环计算平均值和方差(第二版）
第一版中因为公式中含有:分母项:n(n-1),而程序并没有对输入数进行判定,如果仅仅输入一个或者一个都不输入,将会出现除0的情况 基于此,进行第二版改进. 代码: % 脚本文件:states.m % ...
- Android EclipseIDE技巧
一.Eclipse配置使用 1.显示行号(Winodw-->Preferences-->General-->Editors-->Text Editors-->勾上右侧的S ...
- 《经久不衰的Spring框架：SpringMVC 统括》
前言:经久不衰的Spring 这几年,前端技术更新换代速度之快,每一年"最火的前端技术"排行榜都会换一番场景,本当に信じかねる.是"只闻新人笑不见旧人哭",还是 ...
- BZOJ 3653: 谈笑风生(DFS序+可持久化线段树)
首先嘛，还是太弱了，想了好久QAQ 然后，这道题么，明显就是求sigma（size[x]） (x是y的儿子且层树小于k) 然后就可以发现：把前n个节点按深度建可持久化线段树，就能用前缀和维护了 其实不 ...
- 浏览器兼容汇总（css+js）
JavaScript 1. HTML对象获取问题 FireFox:document.getElementById("idName");ie:document.idname或者d ...