用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> ...
随机推荐
- layout -panel01
<script src="~/jquery-easyui-1.5.5.2/jquery.min.js"></script> <link href=&q ...
- ThinkPHP示例：图片上传
ThinkPHP示例之图片上传,包括图片上传.数据库保存.缩略图生成以及图片水印功能演示.首先需要下载框架核心,然后把示例解压到Web根目录下面,并修改入口文件中的框架入口文件的位置.导入示例目录下面 ...
- Django中ORM对数据库的增删改查操作
前言 什么是ORM? ORM(对象关系映射)指用面向对象的方法处理数据库中的创建表以及数据的增删改查等操作. 简而言之,就是将数据库的一张表当作一个类,数据库中的每一条记录当作一个对象.在 ...
- 四. jenkins部署springboot项目(1)--window环境
前提:jenkins和springboot运行在同一台机器 springboot项目使用git和maven jenkins所需的插件如Maven,Git等这里就不再详述. 1.jenkins配置git ...
- kafka ProducerConfig 配置
kafka-clients : 1.0.1
- 洛谷P2602 [ZJOI2010]数字计数(数位dp)
数字计数 题目传送门 解题思路 用\(dp[i][j][k]\)来表示长度为\(i\)且以\(j\)为开头的数里\(k\)出现的次数. 则转移方程式为:\(dp[i][j][k] += \sum_{t ...
- 【JavaSE】运行时类型信息（RTTI、反射）
运行时类型信息使得你可以在程序运行时发现和使用类型信息.--<Think in java 4th> **** 通常我们在面向对象的程序设计中我们经常使用多态特性使得大部分代码尽可能地少了解 ...
- MySQL用户管理及权限设置
mysql 用户管理和权限设置 用户管理 mysql>use mysql; 查看 mysql> select host,user,password from user ; 创建 mysql ...
- 使用Emacs来编程
使用Emacs来编程 */--> code {color: #FF0000} pre.src {background-color: #002b36; color: #839496;} code ...
- CF914D
CF914D 用线段树乱搞一下就行qwq #include<iostream> #include<cstring> #include<cstdio> #includ ...