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>样式的更多相关文章

  1. 用javascript插入样式

    一.用javascript插入<style>样式 有时候我们需要利用js来动态生成页面上style标签中的css代码,方法很直接,就是直接创建一个style元素,然后设置style元素里面 ...

  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. bootsrap 按钮样式

    <!-- Standard button --> <button type="button" class="btn btn-default"& ...

  2. 一条SQL在 MaxCompute 分布式系统中的旅程

    摘要:2019杭州云栖大会大数据技术专场,由阿里云资深技术专家侯震宇.阿里云高级技术专家陈颖达以及阿里云资深技术专家戴谢宁共同以“SQL在 MaxCompute 分布式系统中的旅程 ”为题进行了演讲. ...

  3. SCP-bzoj-1057

    项目编号:bzoj-1057 项目等级:Safe 项目描述: 戳这里 特殊收容措施: 首先枚举最左上角的点(记为(1,1))是黑点还是白点,这样就可以把与(1,1)不在同一对角线系的格点颜色翻转(形式 ...

  4. 【Java架构：基础技术】一篇文章搞掂：MyBatis-Plus

    前言 Mybatis:一个流行的半自动ORM框架. Mybatis-Plus:一个Mybatis的增强工具,在Mybatis的基础上只做增强不做改变,为简化开发.提高效率而生. 本文使用的版本:myb ...

  5. 2019牛客第八场多校 D_Distance 三维BIT或定期重建套路

    目录 题意: 分析: @(2019牛客暑期多校训练营(第八场)D_Distance) 题意: 在三维空间\((n\times m\times h\le 100000)\)内,有\(q(q\le 100 ...

  6. 实用maven笔记四-打包&其他

    通过使用maven的生命周期和丰富多样的插件,可以方便的将项目代码编译打包为自己需要的构件. maven默认项目主代码位置src/main/java目录,测试代码位置src/test/java目录.主 ...

  7. python获取港股通每日成交信息

    接口:ggt_daily 描述:获取港股通每日成交信息,数据从2014年开始 限量:单次最大1000,总量数据不限制 积分:用户积2000积分可调取,5000积分无限制,请自行提高积分,具体请参阅本文 ...

  8. 分布式-技术专区-Redis分布式锁实现-第一步

    承接前面一篇Redis分布式锁的原理介绍 https://www.cnblogs.com/liboware/p/11921759.html 我们针对于实现方案进行接下来上篇进行重新的规划和定义以及完善 ...

  9. pytest-调整测试用例的执行顺序

    场景:未考虑按自然顺序执行时,或想变更执行顺序,比如增加 数据的用例要先执行,再执行删除的用例.测试用例默认是按名 称顺序执行的. • 解决: • 安装:pip install pytest-orde ...

  10. ArrayList的几种初始化方法

    1.使用Arrays.asList方法 ArrayList<Object> obj = new ArrayList<Object>(Arrays.asList(Object o ...