js文件外部引入css，js引入外部js

如何在ejs文件中导入外部的js，css文件

最近在用nodejs写一点东西，当然也用到了express框架和ejs模版了。在使用ejs模版的过程中遇到了这个问题：如何在ejs模版中导入外部的js、css文件。

我猜测，ejs和html导入外部文件的方式应该是不一样的。但是我还是决定试一试。按照之前在html文件中的方式导入，结果失败。

这也证明我之前的想法，这些静态文件一经过服务器，就不能直接进行导入了。那该如何导入呢？

这是我的文件结构：

我现在需要在index.ejs文件中导入public文件夹下的table.css以及table.js两个文件。

我为什么要将两个静态文件放到public文件夹下呢？

大家应该都知道，在使用express框架时，在安装了express模块之后，在该项目下的命令行输入express -e 就会自动生成相应的文件目录。当然，上面的截图中的目录是我自己写的，下面是express自动生成的目录：

可以看到，其中的public文件夹是其自动生成的，也就是让你放静态文件的文件夹。（当然也不是必须是“public”）

相关问答

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

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

 link type="text/css" rel="stylesheet" href="../styles/main.css" /  

script type="text/JavaScript" src="../scripts/dtree.js"/script

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

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

对于1中的相对使用相对于于jsp页面的相对路径的这种方式，如果我们是设置action跳转到test.jsp页面，那么这种使用相对路径的方式就引用不到了。

例如我们当访问的时候，页面跳转到test.jsp页面，如果使用方法1，就引用不到了。

这个时候我们可以使用相对于Web工程的相对路径来引用：

link type="text/css" rel="stylesheet" href="styles/main.css" /  

script type="text/javascript" src="scripts/dtree.js"/script

使用Web工程的绝对路径

方法1和方法2都有缺点，都只适用一种情况，有没有两种情况都适用的呢？答案肯定的！

我们使用绝对路径:

 link type="text/css" rel="stylesheet" href="/MyProject/styles/main.css" /  

 script type="text/javascript" src="/MyProject/scripts/dtree.js"/script

注意：如果我们在部署Web应用时，没有设置Context Root（一般情况下配置为工程名），也就是IP和端口后面不带应用名，如和，这种情况在引用时就不能带工程名了，应该这样：

link type="text/css" rel="stylesheet" href="/styles/main.css" /  

script type="text/javascript" src="/scripts/dtree.js"/script

Q2: 在JS文件中调用外部CSS文件

JS文件中动态调用外部css, 文件方法如下:

function loadExtentFile(filePath, fileType){

if(fileType == "js"){

var oJs = document.create_rElement('script');

oJs.setAttribute("type","text/javascript");

oJs.setAttribute("src", filename);//文件的地址 ,可为绝对及相对路径

document.getElementsByTagName_r("head")[0].appendChild(oJs);//绑定

}else if(fileType == "css"){

var oCss = document.create_rElement("link");

oCss.setAttribute("rel", "stylesheet");

oCss.setAttribute("type", "text/css");

oCss.setAttribute("href", filename);

document.getElementsByTagName_r("head")[0].appendChild(oCss);//绑定

}

}

loadExtentFile("js/func.js", "js");

loadExtentFile("default.css", "css");

清空:

var lists = document.getElementsByTagName_r("link");

for ( var i = 0; i lists.length; i++) {

if (lists[i].getAttribute("href").indexOf(".css") != -1) == -1) {

lists[i].parentNode.removeChild(lists[i]);

}

}

上面的判断语句中可以加入自己的判断。

Q3: 用js文件怎么引入其他js文件和css文件

方法一，在调用文件的顶部加入下例代码：

document.write(”script language=javascript src=’/js/import.js’/script”);

(注：有时你引用的文件还可能需要引用其他的js,我们需要将需要的那个js文件也以同样的方法引用进来)

方法二,通过中间界面对js进行应用

就是我们可以在某个html中引用了你需要的js文件，我们可以通过拿到那个html文件的对象，然后在通过这个对象去引用js的方法。

（一般不常用）

方法三：在将下边代码放入Body中：

new_element=document.createElement(”script”);

new_element.setAttribute(”type”,”text/javascript”);

new_element.setAttribute(”src”,”import.js”);

document.body.appendChild(new_element);

我们来分析一下关键的几句代码：

首先，我们利用document.createElement(”script”)生成了一个script的标签，设置其 type属性为text/javascript，src为import.js(这里的1.js同2.js放在同一个目录，也可放在不同的目录)。最后将这个标签动态 地加入body中。如此一来，我们就可以调用到不同js文件中的方法了。

注意：script language=”JAVASCRIPT” src=’1.js’/script一定要放在body下面。

因为在2.js中用到了body（document.body.appendChild(new_element);）

如果将引如2.js的代码放在body上面，也就是说，

进入页面后，还没有生成body就已经执行b.js里的document.body.appendChild(new_element);了。

这时body不存在就会抛JavaScript错误。

Q4: tp5怎么引入css，js文件

ThinkPHP模版中导入CSS和JS文件的方法

常用方法

1. css使用link

2. js使用src

用tp自己的导入标签import

导入Public文件夹下面的Js目录中的test.js文件，import标签可以省略type属性,默认就是js的文件

复制代码代码如下:

import type='js' file='Js.test'

import type='css' file='Css.test'

不在Public:

复制代码代码如下:

import type='css' file='Css.test' basepath='./Other'/

Other后面不加路径中的/

使用load标签

load标签,非常简单,自动检测

复制代码代码如下:

load href='__PUBLIC__/Css/test.css' /

load href='__PUBLIC__/Js/test.js' /

ThinkPHP快速入门实例教程之数据分页

数据分页可能是web编程里最常用到的功能之一。ThinkPHP实现分页功能十分简洁。只需要定义几个参数就可以实现。并且扩展也十分方便。

下面让我们从零开始实现ThinkPHP的分页程序吧。

1.首先，我们得创建一个用于分页测试的数据库 test.sql代码如下。

2.接着，我们得新建一个ThinkPHP项目。新版tp已经内置了项目自动生成目录功能。

在htdocs(也就是你的网站根目录)下新建一个test文件夹，把THINKPHP核心文件夹放进test根目录，并在test根目录新建文件index.php，加入如下代码：

运行“”.会看到ThinkPHP的欢迎页面。再打开你的test目录看看，发现在根目录下多了一个test文件夹，此时，你的项目目录已经生成了。

打开/test/test/conf/目录，新建“config.php” ,配置好你的数据库连接。

如果你想打开调试模式，请在数组中加入

(3)从form的“action=__URL__/insert”中可以看出，进行表单处理的动作是/test/index.php/index/insert,所以我们得新增insert动作来处理表单提交数据。在此之前，我们还有一件重要的事情要做，那就是新增model文件。通过model文件的建立，我们将能在insert动作中使用便捷的方法来操作数据库了

打开/test/test/lib/model/文件夹，新建文件TestModel.class.php.打开他，输入并保存以下代码

(4)接下来，我们需要在IndexAction类中增加一个首页默认显示动作index()来调用表单数据。

我们该设置一个模板了。在/test/test/tpl/default/index/下新建index.html(因为默认对应了index()。所以程序中可以直接assign.而不用去指定模板文件。当然，这是可以配置的。)

保存他。接着输入

恭喜你。你已经学会了如何利用thinkphp制作分页了！

关于js文件外部引入css和js引入外部js的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。