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 ...
随机推荐
- ArcGIS Pro 简明教程（1）Pro简介
ArcGIS Pro 简明教程(1)Pro简介 ArcGIS Pro已经发布了相当的一段时间了,截至笔者写这系列文章的时候已经是1.3版本了,已经是相当完善的一个版本,基本上已经完成了原来ArcGIS ...
- array_count_values:返回数组中所有值出现的次数
$arr1 = ['a','b','c','d','e','e','a','a']; $arr = array_count_values($arr1); echo '<pre>'; p ...
- 修改UITextField的占位文字颜色的三种层次
层次一:利用富文本 // 描述占位文字属性 NSMutableDictionary *dict = [NSMutableDictionary dictionary] ; dict[NSForegrou ...
- 提升iOS审核通过率之“IPv6兼容测试”
作者:jingle 腾讯系统测试工程师 商业转载请联系腾讯WeTest授权,非商业转载请注明出处. 原文链接:http://wetest.qq.com/lab/view/285.html 一.背景 在 ...
- (4)activiti之uel表达式
有了前面几章,我们肯定有一定的困惑,activiti如何与实际业务整合,比如一条采购单,如何跟一个流程实例互相关联起来? 这里就需要使用到activiti启动流程实例时设置一个流程实例的busines ...
- Windows 7下解决: java.net.SocketException: No buffer space available (maximum connections reached?)
查了一大堆网上的资料全都没用,Google得知,是Windows 7 的socket泄漏 : https://supportkb.riverbed.com/support/index?page=con ...
- 《经久不衰的Spring框架：@ResponseBody 中文乱码》
问题背景 本文并不是介绍@ResponseBody注解,也不是中文乱码问题的大汇总笔记,这些网上都有很多内容了.这边仅对几年前,一个卡壳了挺久时间的问题的解决过程做一个记录,以警惕自己,达到自醒得目的 ...
- 一个chrome图片下载插件的开发过程
最近在做采集,发现用chrome的插件来下载整站也是一个不错的思路,所以想开发一个下载网页(仿站)的插件,学习过程如下: 首先查看一些文档资料 学习360翻译的开发文档:http://open.se. ...
- Alamofire源码解读系列(三)之通知处理(Notification)
本篇讲解swift中通知的用法 前言 通知作为传递事件和数据的载体,在使用中是不受限制的.由于忘记移除某个通知的监听,会造成很多潜在的问题,这些问题在测试中是很难被发现的.但这不是我们这篇文章探讨的主 ...
- 【疑问】css
1.p{float:left}好像意思是p后面的元素往左浮动的意思啊!!2.ff下,button的文字好像没法垂直居中2.1 button垂直对齐,其line-height似乎需要减2px(依边框宽度 ...