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中报错了. 各 ...
随机推荐
- 《对象及DOM知识点及其应用1》
1.图片间的来回切换用if{}else{}; <超链接方式的切换图片(常用)>如:<a href="../images1/1-small.jpg" id=&quo ...
- 对js中this的一点点理解
1 当函数作为对象的方法被调用的时候 this就指向该对象 var o = { prop: 37, f: function() { return this.prop; } }; console.log ...
- ul ol di三者区别
1.ul是无序列表,也就是说没有排列限制可以随意加li: <ul> <li>可以随意放置</li> <li>可以随意放置</li> < ...
- TinyMCE添加图片 路径自动处理成相对路径
默认情况下会自动转换你的图片路径如: 转换: /path/name.jpg 为 ../path/name.jpg 带有域名的路径也会被转换为相对路径. 需要修改一个设置convert_urls,官方文 ...
- [转]设计一款Android App总结
开发工具的选择 开发工具我将选用Android Studio,它是Google官方指定的Android开发工具,目前是1.2.2稳定版,1.3的预览版也已经发布了.Android Studio的优点就 ...
- 我对uml类图关系的理解
uml类图的关系: 泛化关系也就是继承. 实现关系就是一个类实现另外一个接口. 依赖关系就是一个类使用了另外一个类,是一种使用关系,在这个类的某个服务中需要另外一个类来协助. 关联关系就是一类拥有另外 ...
- Windows on Device 项目实践 3 - 火焰报警器制作
在前两篇<Windows on Device 项目实践 1 - PWM调光灯制作>和<Windows on Device 项目实践 2 - 感光灯制作>中,我们学习了如何利用I ...
- Failed to create AppDomain 'xxx'. Exception has been Failed to create AppDomain
一服务器上的数据库全部被置于紧急模式(EMERGENCY),在错误日志里面能看到大量下面的错误 Failed to create AppDomain "YourSQLDba.dbo[runt ...
- Oracle物理体系结构
一.ORACLE 物理体系结构 原理结构图 各部分解释: PGA: 私有内存区,仅供当前发起用户使用. 三个作用 用户登录后的session信息会保存在PGA. 执行排序,如果内存不够,oracle会 ...
- java获取注册ip
String ip = request.getHeader("x-forwarded-for"); if (ip == null || ip.length() == 0 || &q ...