登录 ×

梨花寨前端技术交流平台!

html,css,js,html5,css3等

利用javascript语法引入导入css文件

2012-10-21 11:32:33 | 浏览量:1242

利用js引入导入css文件或Js文件到页面

用途一:
有时候我们要在需要的地方引入css,但是却不支持link rel  例如Wordpress的编辑器就会过滤到link rel声明 和style 声明,那么我今天讲的是用js手段引入css文件。

<script language="javascript">
window.onload = function() {
var l = document.createElement("link");
l.setAttribute("type", "text/css");
l.setAttribute("rel", "stylesheet");
l.setAttribute("href","路径/my.css");

document.getElementsByTagName("head")[0].appendChild(l)
}
</script>

注意路径!

知识点:在css中出现的相对路径,是以css文件所在路径为基准的,而js中的路径则是以导入此js的网页文件所在的位置为基准的。


用途二:
这个复杂些,是我在做表格控件时遇到的问题。
大家在前端开发过程中大多会用过一些控件。以HTML编辑器为例,现在的HTML编辑器都做得很好,只需要几个引用一句JavaScript代码,就实现了。细心会发现,其中用到的图片,css样式文件,是由JavaScript动态指定的,但我们并没有指定图片路径,它怎么就能正确引用了呢?

比如 .js 文件和图片文件、css文件一个目录,但 .js 文件中动态创建 img 时,并不能只有文件名,还应该指定路径,应该这个图片的路径不应该是相对于 .js 来说的,而应该是相对于引用本控件的html 文件而言的。并且,这个路径不能写死,用户把控件放到什么样的目录下,写控件的人不知道的,此外做为一个控件,要尽量方便用户使用,不能在让用户去控件文件中去手动配置这个路径.因此,我们需要动态地算出获取这个路径来。

 通过搜索百度&google总结了个解决方法,仅供参考。


 1.找出引用当前控件 .js 文件的 script;
 2.匹配出 script 的 src 路径,这个路径就是相当于当前 html 文件对 .js 文件的路径;
 3.有了这个路径,就可以用js为页面引入css文件了;

第一步:
 var js = document.scripts;
 jsPath = js[js.length-1].src.substring(0,js[js.length-1].src.lastIndexOf("/")+1);
 alert(jsPath);

  jspath 即是js的路径,也是图片文件、css文件的路径;

第二步:
  window.onload = function() {
var l = document.createElement("link");
l.setAttribute("type", "text/css");
l.setAttribute("rel", "stylesheet");
l.setAttribute("href", jsPath+"/css/table.css");

document.getElementsByTagName("head")[0].appendChild(l);
}
 js动态加载css文件到页面。

ps:

 我做的表格控件,用到时间控件"my97datepicker",如果用到这个时间选择的功能,就需要另外在页面引用"my97datepicker",现在想时间选择的功能大多情况会用,干脆我在控件中直接引用好了,不用用户再麻烦了。
 document.write("<script language='javascript' src='"+jsPath+"/js/My97DatePicker/WdatePicker.js'></script>");
 jsPath,看又用上它了。得到了这个路径用处不小呢!

需求及问题提交:

点击图片更换数字

0.6015s