用javascript插入<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");
var 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");
var 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”);
用javascript插入<style>样式的更多相关文章
- 用javascript插入样式
一.用javascript插入<style>样式 有时候我们需要利用js来动态生成页面上style标签中的css代码,方法很直接,就是直接创建一个style元素,然后设置style元素里面 ...
- 将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> ...
随机推荐
- POJ 2528（线段树+离散化+特殊离散化）网上博客很少有人真正写对！！！ 是POJ数据太水...
Description The citizens of Bytetown, AB, could not stand that the candidates in the mayoral electio ...
- paper 134：结构张量structure tensor（二）
根据结构张量能区分图像的平坦区域.边缘区域与角点区域. 此算法也算是计算机科学最重要的32个算法之一了.链接的文章中此算法名称为Strukturtensor算法,不过我搜索了一下,Strukturte ...
- String、StringBuuffer、StringBuilder三者的区别
string String 字符串常量(final修饰,不可被继承,线程不安全),String是常量,当创建之后即不能更改,可以给多个引用共享,在做大量字符串拼接的时候效率低.(可以通过StringB ...
- css代码思考:display和float
关于display <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- AutoMapper用法 转载https://www.cnblogs.com/youring2/p/automapper.html
AutoMapper是对象到对象的映射工具.在完成映射规则之后,AutoMapper可以将源对象转换为目标对象. 配置AutoMapper映射规则 AutoMapper是基于约定的,因此在实用映射之前 ...
- Tomcat 配置安装
1 下载和安装Tomcat服务器 Tomcat官方站点:http://jakarta.apache.org 下载Tomcat安装程序包:http://tomcat.apache.org/ 启动和测试T ...
- ng-repeat高级用法
ng-repeat高级用法: 遍历数组: <li ng-repeat="item in array">{{item}}</li> 遍历对象: key:对象的 ...
- angular.js实现二级tab切换
<div class="guide-type"> <h3 ng-class="{true:'active', false:''}[tab == 'pc' ...
- upc组队赛12 Cardboard Container【枚举】
Cardboard Container Problem Description fidget spinners are so 2017; this years' rage are fidget cub ...
- upc组队赛6 Greeting Card【打表】
Greeting Card 题目描述 Quido plans to send a New Year greeting to his friend Hugo. He has recently acqui ...