一、用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插入样式的更多相关文章

  1. 用javascript插入<style>样式

    function addCSS(cssText){ var style = document.createElement('style'), //创建一个style元素 head = document ...

  2. 将JavaScript 插入网页的方法

    将JavaScript 插入网页的方法 使用Javascript代码. 插入JavaScript 与在网页中插入CSS的方式相似.使用下面的代码可以在网页中插入JavaScript: ... 其中的. ...

  3. 用 JavaScript 修改样式元素

    利用 <style> 元素,我们可以在网页中嵌入样式表.如果需要动态增加 <style> 元素,似乎可以用如下的 JavaScript 代码: var style = docu ...

  4. javascript改变样式（cssFloat,styleFloat）

    昨天遇到一用js改变元素浮动的,当时直接写了 obj.style.float="left";结果没起作用:查了资料后才发现不能这样写,现在整理下几种样式写法 1,直接写css属性的 ...

  5. 通过JavaScript设置样式和jQuey设置样式，还有随机数抛出水果的习题

    一:通过JavaScript的方式设置样式(:拿习题为例): var shuiguo = document.getElementById('fruit');     shuiguo.style.bac ...

  6. JavaScript中样式，方法 函数的应用

    JavaScript中一个字母都不能错,编写的时候他不报错,也不提示,只有在执行的时候才会提示错误位置 . 一.样式 .waring {background-color:yellow } .highl ...

  7. JavaScript 客户端JavaScript之样式表操作(DOM API 提供模块之一)

    层叠样式 表和动态HTML   层叠样式表(CSS)是指定HTML文档或XML文档的表现的标准.     使用CSS和Javascript,可以创建出各种视觉效果,这些效果可以统称为动态HTML(DH ...

  8. javascript插入before(),after()新DOM方法

    随着web的技术突飞猛进的发展.HTML5 ES6等新技术的发展,与此同时DOM等标准也在悄悄的进步,各大浏览器也在悄悄的发展适配新的属性和方法,今天我们来看看Javascript新的DOM的方法 二 ...

  9. javascript对样式的操作

    js可实现用户对页面中的选择条件改变页面中的样式,页面样式可以通过style修饰,也可以通过css修饰,先来看一下js改变style样式,代码如下: 案例一: <!DOCTYPE html> ...

随机推荐

  1. Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:9001/api/size/get. (Reason: CORS header 'Access-Control-Allow-Origin' missing).

    Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http:/ ...

  2. sessionState与会话

    HTTP 是一种无状态协议.这意味着 Web 服务器会将针对页面的每个 HTTP 请求作为独立的请求进行处理.ASP.NET 会话状态将来自限定时间范围内的同一浏览器的请求标识为一个会话,并提供用于在 ...

  3. nginx.conf

    #user nobody;worker_processes 4; #nginx进程数,建议设置为等于CPU总核心数 #error_log logs/error.log;#error_log logs/ ...

  4. LA4287--tarjan

    题目大意: 在数学中,我们常常需要完成若干个命题的等价性证明.比如,有4个命题a,b,c,d,我们证明a↔b,然后b↔c,最后c↔d.注意每次证明都是双向的,因此一共完成了6次推导.另一种方法是a→b ...

  5. thinkphp怎么设置输入网址直接进入首页

    1.设置apache服务器的时候,文件的位置要写包含index.php的那个主文件夹. 2.apache和thinkphp默认index.html是作为网站的默认首页,所以在浏览器端可以直接输入网址进 ...

  6. MySQL数据库中delimiter的作用概述

    以下的文章主要是向大家描述的是MySQL数据库中delimiter的作用是什么?我们一般都认为这个命令和存储过程关系不大,到底是不是这样的呢?以下的文章将会给你相关的知识,望你会有所收获. 其实就是告 ...

  7. 关于zigbee 网络拓扑节点数量的一点说明

    理论上,一个zigbee网络可以存在65535个节点,即一个协调器下挂这么多个节点(ZR & ZE),但是实际应用中几乎是不可能达到的,达到100~200已经是很不错了,达到300几乎也是凤毛 ...

  8. Error LNK1104 cannot open file 'libboost_system-vc140-mt-gd-1_58.lib'

    I had a similar problem when trying to use boost unit testing in Visual Studio 2015 (Community Editi ...

  9. C++_系列自学课程_第_9_课_C语言风格字符串_《C++ Primer 第四版》

    前面说了写关于数组和指针的内容,这次在这里讨论一下字符串,讨论一下C语言风格的字符串. 在C语言里面我们利用字符数组来对字符串进行处理, 在C++里面我们前面说过一种类类型string可以对字符串进行 ...

  10. Java--对象池化技术 org.apache.commons.pool2.ObjectPool

    org.apache.commons.pool2.ObjectPool提供了对象池,开发的小伙伴们可以直接使用来构建一个对象池 使用该对象池具有两个简单的步骤: 1.创建对象工厂,org.apache ...