js动态创建style节点(js文件中添加css)
ie6 不能 document.createElement('style') 然后append到head标签里。所以就找到这样个好文章
---------------------
有很多提供动态创建 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{ background-color:blue; }”;
document.getElementsByTagName(’HEAD’).item(0).appendChild(style);
很遗憾，上面的代码在 ff 里面成功，但是 ie 不支持。从老外论坛得到代码：
var sheet = document.createStyleSheet();
sheet.addRule(’body’,'background-color:red’);
成功，但是很麻烦，要把字符串拆开写，长一点的写死,累的像狗一样。
接着搜，在一个不知道什么国家的什么语言的blog上找到代码：
document.createStyleSheet(”javascript:’body{background-color:blue;’”);
成功，此人实在厉害，但是问题出来了，url 最大 255 个字符，长一点的就不行了，改：
window.style=”body{background-color:blue;”;
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{ background-color:blue }";
document.getElementsByTagName('HEAD').item(0).appendChild(style);
}
}
</script>
</head>
<body>
<input type="button" value="blue" onclick="blue();"/>
</body>
原文 http://www.cnblogs.com/stephenykk/archive/2013/06/10/3131231.html
js动态创建style节点(js文件中添加css)的更多相关文章
- Javascript动态创建 style 节点
有很多提供动态创建 style 节点的方法,但是大多数都仅限于外部的 css 文件.如何能使用程序生成的字符串动态创建 style 节点,我搞了2个小时. 静态外部 css 文件语法: @import ...
- 利用js动态创建<style>
var nod = document.createElement(“style”), str = “body{background:#000;color:#fff} a{color:#fff;text ...
- js动态创建样式: style 和 link
js动态创建样式: style 和 link ie6 不能 document.createElement('style') 然后append到head标签里.所以就找到这样个好文章 有很多提供动态创建 ...
- ASP.NET在主题中添加CSS文件
ASP.NET在主题中添加CSS文件 在ASP.NET中,可以使用CSS来控制页面上HTML元素和ASP.NET控件的皮肤.如果在主题文件夹中添加了CSS文件,则在页面应用主题时也会自动应用CSS. ...
- UEditor js动态创建和textarea中渲染【原】
UEditor动态创建和textarea中渲染 http://ueditor.baidu.com/website/examples/textareaDemo.html <!DOCTYPE> ...
- JS前端创建CSV或Excel文件并浏览器导出下载
长期以来,在做文件下载功能的时候都是前端通过ajax把需要生成的文件的内容参数传递给后端,后端通过Java语言将文件生成在服务器,然后返回一个文件下载的连接地址url.前端通过location.hre ...
- 通过js动态创建button
通过js动态创建button 一.实例描述 通过JS的DOM对象,实现元素的动态创建. 二.效果 三.代码 <!DOCTYPE html> <html lang="zh-c ...
- js动态创建及移除div的方法
本文实例讲述了js动态创建及移除div的方法.分享给大家供大家参考.具体实现方法如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...
- 用JS动态创建登录表单，报了个小错误
后来发现原来是: dvObj.style.border='#Red 1px sold'; 其中的Red多谢了一个‘#’, 但是奇怪的是在chrome和firefox都备有报错,但是在ie中报错了. 各 ...
随机推荐
- Easyui的渲染
锻炼完身体九点到电脑旁,加上整理明天的接口文档,到现在22:38:10:-_-!!,心累 今天整理下Easyui是如何渲染的: <input class="easyui-combobo ...
- 从头开始搭建一个dubbo+zookeeper平台
本篇主要是来分享从头开始搭建一个dubbo+zookeeper平台的过程,其中会简要介绍下dubbo服务的作用. 首先,看下一般网站架构随着业务的发展,逻辑越来越复杂,数据量越来越大,交互越来越多之后 ...
- iscroll
在原生APP的开发中,有一个常见的功能,就是下拉刷新的功能,这个想必大家都是知道的,但是原生APP的开发,有一个很大的问题就是,你每次更新一些功能,就要用户重新下载一次版本,尤其是在iOS系统中,新版 ...
- CSS3的自定义动画帧
CSS3新增的动画帧非常绚丽,可以简单实现一些动画效果,目前除IE外各大主流浏览器都支持 本文演示三个:transform: scale3d(x, y, z)-缩放;.transform: trans ...
- Html + Css思维导图
最近整理的一份Html和Css的思维导图,共享给初学者使用. 各个知识点的详细案例介绍,后期会分阶段依次发布,希望对大家学习html和css有帮助. 如果对文中的知识点有异议,欢迎随时拍砖! 后期也回 ...
- 【Swift 2.1】共享文件操作小结（iOS 8 +）
前言 适用于 iOS 8 + 本地共享文件列表 声明 欢迎转载,但请保留文章原始出处:) 博客园:http://www.cnblogs.com 农民伯伯: http://over140.cnblogs ...
- iOS之UIApplication详解
UIApplication对象特点: 特点1: UIApplication对象是应用程序的象征,一个UIApplication对象就代表一个应用程序,而且是单例的.(用来封装整个应用程序的一个对象, ...
- FMDB第三方框架
FMDB是同AFN,SDWebImage同样好用的第三方框架,它以OC的方式封装了SQLite的C语言API,使得开发变得简单方便. 附上github链接https://github.com/ccgu ...
- Redis 键(key)相关的命令及其它命令的查看地址
Redis 键(key) Redis 键命令用于管理 redis 的键. 语法 Redis 键命令的基本语法如下: redis 127.0.0.1:6379> COMMAND KEY_NAME ...
- Dictionary摘抄
Dictionary,字典,键值对集合. 下面的代码示例创建一个空的带有字符串键的字符串 Dictionary,并使用 Add 方法添加一些元素.该示例演示在尝试添加重复的键时 Add 方法引发Arg ...