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中报错了. 各 ...
随机推荐
- 不明显的多线程编程的具体Bugs
我们都知道,在编写多线程程序时,我们应该记住很多细节,比如锁,使用线程安全库等.这里有一个不太明显的bug的列表,特定于多线程程序.其中许多都没有在初学者的文档或教程中提到,但我认为每个使用线程的人最 ...
- sql 小操作
1.COALESCE(oe.promotion_value, 0) 设置默认值 2.group_concat(pspk.name) 合并字段
- 请将项目文件中的“AutoGenerateBindingRedirects”属性设置为 true 警告！！！
- GPS数据读取与处理
GPS数据读取与处理 GPS模块简介 SiRF芯片在2004年发布的最新的第三代芯片SiRFstar III(GSW 3.0/3.1),使得民用GPS芯片在性能方面登上了一个顶峰,灵敏度比以前的产品大 ...
- spring-boot 热部署 intellij IDE
1.使用springloadded插件: 如何使用: a.先在ide里面部署好你的service,( mvn spring-boot:run) b.修改代码, c.command+F9(或build- ...
- UITabBarController 更改tabbariteam上的选中图片
首先遵守“ UITabBarControllerDelegate ”协议 再在- (void)viewDidLoad {}方法中设置代理“ self.tabBarController.delegate ...
- iOS 疑难杂症 — — Swift debugger 无法在控制台 po 变量值的问题
前言 这个问题出现有好几个月了,一直没弄,以为是 Xcode 的问题后面版本升级应该就能好所以就不管了,今天心情好顺便查了一下. 声明 欢迎转载,但请保留文章原始出处:) 博客园:http://w ...
- iOS之触摸及手势
触摸事件 iOS中的事件: 在用户使用app过程中,会产生各种各样的事件.iOS中的事件可以分为3大类型: view的触摸事件处理: 响应者对象: 在iOS中不是任何对象都能处理事件,只有继承了 ...
- MySQL 使用JOIN优化子查询
1.数据准备 mysql> select * from student; +----+--------+----------+---------+-------------+ | id | na ...
- android 拔打电话功能
private void phoneCall(String num) { String phoneNum = "tel:" + num; Uri smsToUri = Uri.pa ...