位置: 编程技术 - 正文

Javascript动态引用CSS文件的2种方法介绍(js动态引入css文件)

编辑：rootadmin

最近做一个项目，需要javascript动态插入样式，结果以前的方法失效了！查了2个小时的原因竟然是自己手贱，这个最后再说！

javascript插入样式在前端开发中应用比较广泛，特别是在修改前端表现和页面换肤的时候。最近做的这个任务是用户在别人的站点上点击一个按钮，就会在别的站点页面下插入一个脚本，执行，这其中包含了样式的插入。

一般情况下javascript动态插入样式有两种，一种页面中引入外部样式,在<head>中使用<link>标签引入一个外部样式文件，另一种是在页面中使用<style>标签插入页面样式（这里说的不是style属性）。

一、页面中引入外部样式：

在<head>中使用<link>标签引入一个外部样式文件，这个比较简单，各个主流浏览器也不存在兼容性问题：

但是在我目前做的这个项目中本身应用的样式非常少，直接用引入一个外部样式文件似乎不合适，所以我选择了第二种方案，在页面中使用<style>标签插入页面样式。

二、使用<style>标签插入页面样式：

这种方式在各个主流浏览器存在兼容性问题，像firefox等标准浏览器无法直接获取设置styleSheet的cssText值，标准浏览器下只能使用document.styleSheets[0].cssRules[0].cssText单个获取样式；同时使用：document.styleSheets[0].cssRules[0].cssText=newcssText；页面不会自动更新样式，必须使用：document.styleSheets[0].cssRules[0].style.cssText=newcssText；这点似乎没坑爹的IE来的人性化和简便。YUI中使用了一个很好的办法：style.appendChild(document.createTextNode(styles));采用createTextNode将样式字符串添加到<style>标签内；

这样页面中的元素就能直接应用样式了，不管你的这些元素是不是通过脚本追加的。

关于手贱：

看这段代码：

前面说了这个项目是用户在别人的站点上点击一个按钮，就会在别的站点页面下插入一个脚本，执行，这其中包含了样式的插入，我为了尽可能的保证我创建的元素ID唯一性，手贱在元素ID前加了“__”,表示私有防止冲突。结果悲剧了，IE6，IE7 class和id的命名不能以下划线开头（“_”），竟然把这个给忘了！花了两个小时才找到原因。悲剧啊！得出一个结论！做前端千万不能手贱！

推荐整理分享Javascript动态引用CSS文件的2种方法介绍(js动态引入css文件)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:js动态引入js,jsp动态引入和静态引入区别,jsp动态引入,js动态引入css,js动态调用方法,js动态调用方法,js动态调用方法,js动态引入css,内容如对您有帮助，希望把文章链接给更多的朋友！

js中的caller和callee属性介绍和例子一、caller返回一个对函数的引用，该函数调用了当前函数。functionName.callerfunctionName对象是所执行函数的名称。说明对于函数来说，caller属性只有在函数

ECMAScript6的新特性箭头函数（Arrow Function）详细介绍箭头函数是ECMAScript6最受关注的更新内容之一。它引入了一种用「箭头」（=）来定义函数的新语法，它…它碉堡了~。箭头函数与传统的JavaScript函数主要

javascript浏览器兼容教程之事件处理 1.window.event【分析说明】先看一段代码functionet(){alert(event);//IE:[object]}以上代码在IE运行的结果是[object]，而在Firefox无法运行。因为在IE中event作为window对