用javascript插入样式
一、用javascript插入<style>样式
有时候我们需要利用js来动态生成页面上style标签中的css代码，方法很直接，就是直接创建一个style元素，然后设置style元素里面的css代码，最后把它插入到head元素中。
但有些兼容性问题我们需要解决。首先在符合w3c标准的浏览器中我们只需要把要插入的css代码作为一个文本节点插入到style元素中即可，而在IE中则需要利用style元素的styleSheet.cssText来解决。
还需要注意的就是在有些版本IE中一个页面上style标签数量是有限制的，如果超过了会报错，需要考虑这点。
function addCSS(cssText){
var style = document.createElement('style'), //创建一个style元素
head = document.head || document.getElementsByTagName('head')[0]; //获取head元素
style.type = 'text/css'; //这里必须显示设置style元素的type属性为text/css，否则在ie中不起作用
if(style.styleSheet){ //IE
var func = function(){
try{ //防止IE中stylesheet数量超过限制而发生错误
style.styleSheet.cssText = cssText;
}catch(e){
}
}
//如果当前styleSheet还不能用，则放到异步中则行
if(style.styleSheet.disabled){
setTimeout(func,10);
}else{
func();
}
}else{ //w3c
//w3c浏览器中只要创建文本节点插入到style元素中就行了
var textNode = document.createTextNode(cssText);
style.appendChild(textNode);
}
head.appendChild(style); //把创建的style元素插入到head中
}
//使用
addCSS('#demo{ height: 30px; background:#f00;}');
当然这只是一个最基本的演示方法，实际运用中还需进行完善，比如把每次生成的css代码都插入到一个style元素中，这样在IE中就不会发生stylesheet数量超出限制的错误了。
封装：
var importStyle=function importStyle(b){var a=document.createElement("style"),c=document;c.getElementsByTagName("head")[0].appendChild(a);if(a.styleSheet){a.styleSheet.cssText=b}else{a.appendChild(c.createTextNode(b))}};
importStyle('h1 { background: red; }');//调用
seajs封装
seajs.importStyle=function importStyle(b){var a=document.createElement("style"),c=document;c.getElementsByTagName("head")[0].appendChild(a);if(a.styleSheet){a.styleSheet.cssText=b}else{a.appendChild(c.createTextNode(b))}};
二、javascript插入<link>样式
在<head>中使用<link>标签引入一个外部样式文件，这个比较简单，各个主流浏览器也不存在兼容性问题：
function includeLinkStyle(url) {
var link = document.createElement(“link”);
link.rel = “stylesheet”;
link.type = “text/css”;
link.href = url;
document.getElementsByTagName(“head”)[0].appendChild(link);
}
includeLinkStyle(“http://css.xxx.com/home/css/reset.css?v=20101227”);
参考：
http://www.cnblogs.com/2050/p/4029656.html
本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：http://www.cnblogs.com/starof/p/5274781.html有问题欢迎与我讨论，共同进步。
用javascript插入样式的更多相关文章
- 用javascript插入<style>样式
function addCSS(cssText){ var style = document.createElement('style'), //创建一个style元素 head = document ...
- 将JavaScript 插入网页的方法
将JavaScript 插入网页的方法 使用Javascript代码. 插入JavaScript 与在网页中插入CSS的方式相似.使用下面的代码可以在网页中插入JavaScript: ... 其中的. ...
- 用 JavaScript 修改样式元素
利用 <style> 元素,我们可以在网页中嵌入样式表.如果需要动态增加 <style> 元素,似乎可以用如下的 JavaScript 代码: var style = docu ...
- javascript改变样式（cssFloat,styleFloat）
昨天遇到一用js改变元素浮动的,当时直接写了 obj.style.float="left";结果没起作用:查了资料后才发现不能这样写,现在整理下几种样式写法 1,直接写css属性的 ...
- 通过JavaScript设置样式和jQuey设置样式，还有随机数抛出水果的习题
一:通过JavaScript的方式设置样式(:拿习题为例): var shuiguo = document.getElementById('fruit'); shuiguo.style.bac ...
- JavaScript中样式，方法 函数的应用
JavaScript中一个字母都不能错,编写的时候他不报错,也不提示,只有在执行的时候才会提示错误位置 . 一.样式 .waring {background-color:yellow } .highl ...
- JavaScript 客户端JavaScript之样式表操作(DOM API 提供模块之一)
层叠样式 表和动态HTML 层叠样式表(CSS)是指定HTML文档或XML文档的表现的标准. 使用CSS和Javascript,可以创建出各种视觉效果,这些效果可以统称为动态HTML(DH ...
- javascript插入before(),after()新DOM方法
随着web的技术突飞猛进的发展.HTML5 ES6等新技术的发展,与此同时DOM等标准也在悄悄的进步,各大浏览器也在悄悄的发展适配新的属性和方法,今天我们来看看Javascript新的DOM的方法 二 ...
- javascript对样式的操作
js可实现用户对页面中的选择条件改变页面中的样式,页面样式可以通过style修饰,也可以通过css修饰,先来看一下js改变style样式,代码如下: 案例一: <!DOCTYPE html> ...
随机推荐
- ASP.NET MVC使用Areas后怎样获取Area（区域）的名称
写此随笔,目的只为今后在ASP.NET MVC项目中再用到Area(区域)时作为备查. 获取当前Area(区域)名称的方法是: ViewContext.RouteData.DataTokens[&qu ...
- 增加删除字段修改字段名，修改表结构，非常用SQL语句技巧总结
1.为数据表添加一个新字段 Alter TABLE [dbo].[CustomerBackupConfig] Add [Stamp] [timestamp] NULL GO 2.为数据表添加两个新字段 ...
- 【C#】 异常处理
异常是在程序执行期间出现的问题.C# 中的异常是对程序运行时出现的特殊情况的一种响应,比如尝试除以零等异情况. 异常提供了一种把程序控制权从某个部分转移到另一个部分的方式. C# 异常处理时建立在四个 ...
- 【C语言学习趣事】_33_关于C语言和C++语言中的取余数(求模)的计算_有符号和无符号数的相互转换问题
最近再次复习C++语言,用的教材是<C++ Primer>这本教材, 看到第二章的时候,里面有个问题困扰了我. 于是想上网查查怎么回事, 结果看了很久都没有得到一个满意的答案. 书上有这么 ...
- js实现web网页版台球游戏
js桌球小游戏在线试玩地址:http://keleyi.com/game/13/ 游戏截图: 完整代码,保存到html文件可以试玩: <!DOCTYPE html PUBLIC "-/ ...
- WebStorage记录滚动条位置
因关注公众号<HTML5学堂>看到这篇文章 "利用本地存储,记录滚动条的位置" ,便好奇敲来试试,然后又看了一些关于WebStorage的资料 附上这篇文章的地址 ht ...
- 对kinderEditor 的空内容进行验证
var con = document.getElementById(item.Id).value; var a = con.replace(/( )|[ ]|(<p>)|(<\/p& ...
- iOS 开源项目
在 Github 上 Star 太多了,有时候很难找到自己想要的开源库,所以在此记录下来.便于自己开发使用,也顺便分享给大家. 动画 awesome-ios-animation收集了iOS平台下比较主 ...
- iOS之两个ImageView实现图片滚动
原创作者:codingZero 导语 在不少项目中,都会有图片轮播这个功能,现在网上关于图片轮播的框架层出不穷,千奇百怪,笔者根据自己的思路,用两个imageView也实现了图片轮播,这里说说笔者的主 ...
- iOS之微信支付
前言:下面介绍微信支付的开发流程的细节,图文并茂,你可以按照我的随笔流程过一遍代码.包你也学会了微信支付.而且支付也是面试常问的内容. 正文: 1.首先在开始使用微信支付之前,有一些东西是开发者必须要 ...