JS动态创建css的两种方法
2017-08-11 17:41
183 查看
动态创建css样式有两种方式:
1.引入外部css文件 2.插入css代码片段
动态插入css外部文件的方法:
function loadStyle(url){ var link = document.createElement('link'); link.type = 'text/css'; link.rel = 'stylesheet'; link.href = url; var head = document.getElementsByTagName('head')[0]; head.appendChild(link); } loadStyle('test.css');1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
动态加载css代码片段
function loadCssCode(code){ < a0ff span class="hljs-keyword" style="color:rgb(0,0,136);">var style = document.createElement('style'); style.type = 'text/css'; style.rel = 'stylesheet'; //for Chrome Firefox Opera Safari style.appendChild(document.createTextNode(code)); //for IE //style.styleSheet.cssText = code; var head = document.getElementsByTagName('head')[0]; head.appendChild(style); } loadCssCode('body{background-color:#f00}');1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12
IE中标签被视为一个特殊标签,不能访问其子元素,所以要使用stylesheet.cssText,使用try catch语句捕获IE抛出的错误,兼容代码如下:
function loadCssCode(code){ var style = document.createElement('style'); style.type = 'text/css'; style.rel = 'stylesheet'; try{ //for Chrome Firefox Opera Safari style .appendChild(document.createTextNode(code)); }catch(ex){ //for IE style.styleSheet.cssText = code; } var head = document.getElementsByTagName('head')[0]; head.appendChild(style); } loadCssCode('body{background-color:#f00}');1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
这种方式可以实时向页面添加样式,所以可以立即在页面上得意反应
相关文章推荐
- JS动态创建元素(两种方法)
- JS动态创建元素的两种方法
- JS动态创建元素的两种方法
- 用js动态生成css代码的两种方法!
- 浅析JS动态创建元素【两种方法】
- javascript 动态生成css代码的两种方法
- JS动态加载JS和CSS文件的方法
- 【cocos2d-js系列问题】cocos2d-js创建帧动画的两种方法
- js+jquery动态设置/添加/删除/获取元素属性的两种方法集锦对照(动态onclick属性设置+动态title设置)
- js动态创建html元素的方法
- OC中动态创建可变数组的问题.有一个数组,数组中有13个元素,先将该数组进行分组,每3个元素为一组,分为若干组,最后用一个数组统一管理这些分组.(要动态创建数组).两种方法
- css、js两种方法实现遮罩效果
- js动态创建/删除 (页面)元素节点、设置其属性方法
- js动态加载css文件和js文件的方法
- JS动态引入js,CSS——动态创建script/link/style标签
- asp.net后台动态添加JS文件和css文件的引用实现方法
- js动态创建及移除div的方法
- 两种动态创建对象的方法
- JS 动态加载js文件和css文件 同步/异步的两种简单方式