这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
下面小编就为大家带来一篇 javascript 动态样式添加的简单实现。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
异步加载 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>
来源: http://www.phperz.com/article/17/0514/331302.html