javascript 动态样式添加的简单实现
2016-10-11 09:28
651 查看
异步加载css文件或者异步加载css模块,支持所有浏览器,包括IE,参考至javascript高级编程
1.createLink方法用于创建一个style标签并添加到head标签中
2.createModule方法用于创建一个style样式表的标签,并且如果在IE8以下的版本运行会抛出异常,在异常捕获模块中执行style.styleSheet.cssText兼容IE添加style的样式内容。
<button id="demo">css文件</button> <button id="demo1">css模块</button> <script type="text/javascript"> //异步加载css文件,支持所有浏览器 document.getElementById("demo").onclick = function () { createLink("../../css/demo.css"); } function createLink(src) { var link = document.createElement("link"); link.rel = "stylesheet" link.type = "text/css"; link.href = src; document.getElementsByTagName("head")[0].appendChild(link); } //IE将<style>视为一个特殊的与<script>类似的节点,不允许其访问子节点,事实上,IE此时抛出的错误与向<script>元素添加子节点时抛出的错误相同, //解决IE中的这个问题的办法就是访问元素的styleSheet属性,该属性又有一个CSSText属性,可以接受css代码 document.getElementById("demo1").onclick = function () { createModule("body{background:green;}"); } function createModule(css) { var style = document.createElement("style"); style.type = "text/css"; try { style.appendChild(document.createTextNode(css)); } catch (ex) { style.styleSheet.cssText = css; } document.getElementsByTagName("head")[0].appendChild(style); } </script>
以上就是小编为大家带来的javascript 动态样式添加的简单实现全部内容了,希望大家多多支持脚本之家~
您可能感兴趣的文章:
相关文章推荐
- Javascript 创建类并动态添加属性及方法的简单实现
- JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
- JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(推荐七)
- JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
- 在Css样式表中添加javascript,实现动态效果
- php+javascript+css 实现动态添加数据行
- 再谈javascript 动态添加样式规则 W3C校检
- 如何实现服务器端下页面动态添加JavaScript脚本
- javascript实现的动态添加表单元素input,button等(appendChild)
- Asp.net(asp,jsp)+JavaScript动态实现添加数据行
- JavaScript实现动态添加Html控件
- javascript实现的动态添加表单元素input,button等(appendChild)
- JavaScript+CSS实现表格动态样式
- javascript动态生成表格,并实现对表格行的添加和删除
- JavaScript 动态添加脚本,并触发回调函数的实现代码
- Javascript实现动态菜单添加
- JavaScript动态实现表格添加、删除、插入、上移、下移一行功能
- 一个简单但常用的javascript表格样式_鼠标划过行变色 简洁实现
- 如何实现服务器端下页面动态添加JavaScript脚本
- JavaScript实现导航样式动态变化