js中动态引入css文件路径|如何实现JavaScript动态加载CSS和JS文件

㈠ 在js文件中调用外部CSS文件

有点不明来白你的意思。自是不是这样: 你的一个html页面里面本来包含一个框架页,后来你想把框架页换成一个js包含进去。页面加载 js 跟 框架 是不一样的。框架里的页面是独立的,不能共享父页面的css。js就不一样了,他用的是父页面的css。最简单的是你先把你框架页<body> ………… </body>之间的代码写进父页面,用的css也写在父页面,然后看显示时候正常,再把这段代码写到js里,引进去OK了。

㈡ 在一个xx.js文件中,怎么引用外部的css

@import url(xx.css); 或 <link type="text/css" rel="stylesheet" href="xx.css">

㈢ js怎样动态调用外部CSS

<style>body{ color:#FF0000}a:hover{ background:#00ccFF}</style><script language="javascript">var indexcss=new Array() indexcss[0]='index0.css' indexcss[1]='index1.css' indexcss[2]='index2.css'function loadjscssfile(filename, filetype){ if (filetype=="css"){ //判断文件类型 var fileref=document.createElement("link") fileref.setAttribute("rel", "stylesheet") fileref.setAttribute("type", "text/css") fileref.setAttribute("href", filename)}if (typeof fileref!="undefined") document.getElementsByTagName("head")[0].appendChild(fileref)}document.getElementsByTagName("head")[0].appendChild(fileref)</script><a href="#" onClick="loadjscssfile(indexcss[0],'css')">1111css</a><a href="#" onClick="loadjscssfile(indexcss[1],'css')">2222css</a><a href="#" onClick="loadjscssfile(indexcss[2],'css')">3333css</a>

㈣ 如何实现JavaScript动态加载CSS和JS文件

这要看来你css和js文件放在源哪了像我

在这里的js和style(里放的是css)

在jsp代码中的路径就为

<link rel="stylesheet" href="style/global.css" />

<link rel="stylesheet" href="style/global_color.css" />

<link rel="stylesheet" href="style/new.css" />

<script src = "js/jquery-1.11.1.js"></script>

<script type="text/javascript" src = "js/ajax.js"></script>

㈤ 开发js插件如何引用外部css文件

使用相对于jsp页面的相对路径

<linktype="text/css"rel="stylesheet"href="../styles/main.css"/><scripttype="text/JavaScript"src="../scripts/dtree.js"></script>

这样在页面使用http://localhost:8080/项目名/**.jsp访问test.jsp时就可以引用到dtree.js和main.css。

使用相对于Web工程的相对路径

对于1中的相对使用相对于于jsp页面的相对路径的这种方式,如果我们是设置action跳转到test.jsp页面,那么这种使用相对路径的方式就引用不到了。例如我们当访问http://localhost:8080/MyProject/main.do的时候,页面跳转到test.jsp页面,如果使用方法1,就引用不到了。这个时候我们可以使用相对于Web工程的相对路径来引用:

<linktype="text/css"rel="stylesheet"href="styles/main.css"/><scripttype="text/javascript"src="scripts/dtree.js"></script>

使用Web工程的绝对路径

方法1和方法2都有缺点,都只适用一种情况,有没有两种情况都适用的呢?答案肯定的!我们使用绝对路径:

<linktype="text/css"rel="stylesheet"href="/MyProject/styles/main.css"/><scripttype="text/javascript"src="/MyProject/scripts/dtree.js"></script>

注意:如果我们在部署Web应用时,没有设置ContextRoot(一般情况下配置为工程名),也就是IP和端口后面不带应用名,如http://localhost:8080/main.do和http://localhost:8080/test.jsp,这种情况在引用时就不能带工程名了,应该这样:

<linktype="text/css"rel="stylesheet"href="/styles/main.css"/><scripttype="text/javascript"src="/scripts/dtree.js"></script>


赞 (0)