javascript/js 原生动态引入外部css文件及动态插入css代码片段
2017-08-01 12:06
811 查看
动态创建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');
动态加载css代码片段
function loadCssCode(code){ 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}');
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}');
这种方式可以实时向页面添加样式,所以可以立即在页面上得意反应
相关文章推荐
- javascript/js 原生动态引入外部css文件及动态插入css代码片段
- javascript/js 原生动态引入外部css文件及动态插入css代码片段
- javascript/js 原生动态插入外部js文件及动态插入js代码片段,兼容ie
- 动态载入/删除/更新外部 JavaScript/Css 文件的代码
- 使用javascript动态加载外部css或js文件
- JavaScript 的性能优化:加载和执行(以及动态引入的外部 JS 文件在各浏览器中的加载顺序不一致)
- 动态载入/删除/更新外部 JavaScript/Css 文件的代码
- ASP.net动态加载JS代码与CSS文件
- 动态加载外部javascript文件的函数代码分享
- 动态加载js和css(外部文件)
- 如何使用jquery动态加载js,css文件实现代码
- 引入外部css ,js文件
- 动态加载外部css或js文件
- 动态加载外部javascript文件的函数代码分享
- 动态载入/删除/更新外部 JavaScript/Css 文件
- 引入js文件和css文件和js片段
- 动态加载外部CSS与JS文件
- JavaScript引入外部js文件时报错
- 动态引入的外部 JS 文件在各浏览器中的加载顺序不一致问题解决
- asp.net后台代码动态添加JS文件和css文件的引用