1. function addCSS(cssText){
  2.     var style = document.createElement('style'),  //创建一个style元素
  3.         head = document.head || document.getElementsByTagName('head')[0]; //获取head元素
  4.     style.type = 'text/css'; //这里必须显示设置style元素的type属性为text/css，否则在ie中不起作用
  5.     if(style.styleSheet){ //IE
  6.         var func = function(){
  7.             try{ //防止IE中stylesheet数量超过限制而发生错误
  8.                 style.styleSheet.cssText = cssText;
  9.             }catch(e){
  10.  
  11.             }
  12.         }
  13.         //如果当前styleSheet还不能用，则放到异步中则行
  14.         if(style.styleSheet.disabled){
  15.             setTimeout(func,10);
  16.         }else{
  17.             func();
  18.         }
  19.     }else{ //w3c
  20.         //w3c浏览器中只要创建文本节点插入到style元素中就行了
  21.         var textNode = document.createTextNode(cssText);
  22.         style.appendChild(textNode);
  23.     }
  24.     head.appendChild(style); //把创建的style元素插入到head中
  25. }
  26.  
  27. //使用
  28. addCSS('#demo{ height: 30px; background:#f00;}');

　　

当然这只是一个最基本的演示方法，实际运用中还需进行完善，比如把每次生成的css代码都插入到一个style元素中，这样在IE中就不会发生stylesheet数量超出限制的错误了。

封装：

  1. var importStyle=function importStyle(b){
  2.     var a=document.createElement("style");
  3.     var c=document;c.getElementsByTagName("head")[0].appendChild(a);
  4.     if(a.styleSheet){
  5.         a.styleSheet.cssText=b
  6.     }else{
  7.         a.appendChild(c.createTextNode(b))
  8.     }
  9. };
  10. importStyle('h1 { background: red; }');//调用

seajs封装

  1. seajs.importStyle=function importStyle(b){
  2.     var a=document.createElement("style");
  3.     var c=document;c.getElementsByTagName("head")[0].appendChild(a);
  4.     if(a.styleSheet){
  5.         a.styleSheet.cssText=b
  6.     }else{
  7.         a.appendChild(c.createTextNode(b))
  8.     }
  9. };

　　

javascript插入<link>样式

在<head>中使用<link>标签引入一个外部样式文件，这个比较简单，各个主流浏览器也不存在兼容性问题：

  1. function includeLinkStyle(url) {
  2. var link = document.createElement(“link”);
  3. link.rel = “stylesheet”;
  4. link.type = “text/css”;
  5. link.href = url;
  6. document.getElementsByTagName(“head”)[0].appendChild(link);
  7. }
  8.  
  9. 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. jquery实现回车键登录/搜索等确认功能

    button按钮提交方式: $('#search').click(function() { get_table(); }); //keyCode=13是回车键,设置回车键提交 $("body ...

  2. Appium+python自动化-查看app元素属性

    本文转自:https://www.cnblogs.com/yoyoketang/p/7581831.html 前言 学UI自动化首先就是定位页面元素,玩过android版的appium小伙伴应该都知道 ...

  3. 仿flask写的web框架

    某大佬仿flask写的web框架 web_frame.py from werkzeug.local import LocalStack, LocalProxy def get_request_cont ...

  4. Install Apache 2.2.15, MySQL 5.5.34 & PHP 5.5.4 on RHEL/CentOS 6.4/5.9 & Fedora 19-12 [转]

    Step 1: Installing Remi Repository ## Install Remi Repository on Fedora , , , , ## rpm -Uvh http://d ...

  5. Autofac框架详解 转载https://www.cnblogs.com/lenmom/p/9081658.html

    一.组件 创建出来的对象需要从组件中来获取,组件的创建有如下4种(延续第一篇的Demo,仅仅变动所贴出的代码)方式: 1.类型创建RegisterType AutoFac能够通过反射检查一个类型,选择 ...

  6. C++——智能指针

    动态内存管理:new-delete——很难正确释放内存——智能指针 使用场景: 1.程序不知道自己要使用多少对象 2.程序不知道自己所需对象的准确类型 3.程序需要在多个对象之间共享数据 4.坚持只使 ...

  7. pat甲级题目1001 A+B Format详解

    pat1001 A+B Format (20 分) Calculate a+b and output the sum in standard format -- that is, the digits ...

  8. 深入理解javascript原型和闭包（1）——一切都是对象 （转载）

    深入理解javascript原型和闭包(1)——一切都是对象  http://www.cnblogs.com/wangfupeng1988/p/3977987.html “一切都是对象”这句话的重点在 ...

  9. Eureka 系列（04）客户端源码分析

    Eureka 系列(04)客户端源码分析 [TOC] 0. Spring Cloud 系列目录 - Eureka 篇 在上一篇 Eureka 系列(01)最简使用姿态 中对 Eureka 的简单用法做 ...

  10. 2.1 Nginx服务器安装

    2.1 Nginx目录和文件介绍 windows下解压nginx后的文件介绍: conf:存放Nginx服务器的配置文件,包含Nginx服务器的基本配置文件和对部分特性的配置文件,正确配置此文件可以保 ...