链接到外部样式表和JavaScript文件

我想将我的HTML主页链接到外部CSS样式表和外部JavaScript（.js）文件。无论出于何种原因，取决于我在HTML文件中列出它们的顺序，只有其中一个会起作用。我在JavaScript文件中使用了一个简单的警告框来测试它是否正常工作，并且它只在JavaScript文件首先链接时才会执行。这是我的工作......（我顺便也一个HTML小白）链接到外部样式表和JavaScript文件

<!doctype html> 
<html lang="en"> 

<head> 
<meta charset="utf-8 /> 
<link rel="stylesheet" href="trinity.css" /> 
<Script src="churchJavaScript.js"></script> 
<title>Trinity Temple</title> 
</head> 

<body> 

<div id="CompleteWrapper"> 

    <header id="headerSection"> 
     <h1> Trinity Temple</h1> 
     <h3> &nbsp;&nbsp;And I sent messengers unto them, saying, I am   doing a great work, so that I cannot come down: </br> 
     &nbsp;&nbsp;why should the work cease, whilst I leave it, and come  down to you? Nehemiah 6:3 </h3> 
    </header> 

<nav id="navSection"> 
    <ul> 
     <li>Home</li> 
     <li><a href="serviceInformation.html">Service Information</a></li> 
     <li><a href="aboutUs.html">About Us</a></li> 
     <li><a href="directory.html">Directory</a></li> 
     <li><a href="contactUs.html">Contact Us</a></li> 
    </ul> 
</nav> 

<section id="sectionSection"> 
    <h3> Welcome to Trinity Temple Church of God In Christ! </h3></br> 
    <hr width = 75% size= "1" color="#b20000" /> 
    testing tolaslksdflksdflksdflkslkdslkjdslksfdlkdslkdslk</br> 
    testing tolaslksdflksdflksdflkslkdslkjdslksfdlkdslkdslk</br> 
    testing tolaslksdflksdflksdflkslkdslkjdslksfdlkdslkdslk</br> 
    testing tolaslksdflksdflksdflkslksadfsadfsdafsdadslkjdslksfdlkdslkdslk</br> 
    testing tolaslksdflksdflksdflkslkdslkjdslksfdlkdslkdslk</br> 
    testing tolaslksdflksdflksdflkslkdslkddddddjdslksfdlkdslkdslk</br> 
    testing tolaslksdflksdflksdflkslkdslkjdslksfdlkdslkdslk</br> 
</section> 

<aside id="asideSection"> 
</aside> 

<footer id="footerSection" > 
    2900 Josephine St. </br> 
    Denver, CO 80207 
</footer> 

</div> 
</body> 
</html>

这里是在外部文件中的JavaScript代码...

window.addEventListener("load", todaysDate, false); 
function todaysDate(){ 
var currentTime = new Date(); 
var month = currentTime.getMonth() + 1; 
var day = currentTime.getDate(); 
var year = currentTime.getFullYear(); 

var completeDate = document.getElementById("footerSection"); 
footerSection.innerHMTL = "Today's Date: " +completeDate; 
alert(month + "/" + day + "/" + year); 

} 
window.addEventListener("load", todaysDate, false);

而且，这里是代码在服务信息的HTML文档...

<!doctype html> 

<html > 
<head lang="en"> 
<meta charset="utf-8"/> 
<script src="churchJavaScript.js"> </script> 
<link rel="stylesheet" href="trinity.css"/> 
<title> Service Information</title> 
</head> 

<body> 

<div id="CompleteWrapper"> 
<header id="headerSection"> 

    <h1> Trinity Temple</h1> 
    <h3> &nbsp;&nbsp;And I sent messengers unto them, saying, I am doing a  great work, so that I cannot come down: </br> 
    &nbsp;&nbsp;why should the work cease, whilst I leave it, and come down to  you? Nehemiah 6:3 </h3> 
</header> 

<nav id="navSection"> 
<ul> 

    <li><a href="index.html">Home</a></li> 
    <li>Service Information</li> 
    <li><a href="aboutUs.html">About Us</a></li> 
    <li><a href="directory.html">Directory</a></li> 
    <li><a href="contactUs.html">Contact Us</a></li> 
</ul> 
</nav> 

<section id="sectionSection"> 
<h2> Service Information </h2></br> 
<hr width = 75% size= "1" color="#b20000" /> 
<h3>Sunday</br></h3> 
Sunday School: Sunday 9am - 10:30am </br> 
Sunday Service: Sunday 10:30 - 1:00pm</br> 
</br> 
<h3>Wednesday</br></h3> 
Bible Study: 6:30pm - 8:30pm 
</br> 





</section> 

<aside id="asideSection"> 
</aside> 

<footer id="footerSection" > 

2900 Josephine St. </br> 
Denver, CO 80207 
</footer> 

</div> 
</body> 
</html>

来源

2013-11-24 Theo Anderson

试试这个你<head>节内：

<script type="text/javascript" src="churchJavaScript.js"></script> 
<link href="trinity.css" rel="stylesheet" type="text/css" />

确保trinity.css，churchJavaScript.js和你HTML文件在同一个文件夹中。

在桌面网站上将js放在css之前的性能略好。 Read why here。

来源

2013-11-24 00:14:46 cronoklee

进行了更改，但我注意到，但是当我导航到服务信息页面时，JavaScript运行但它不会在任何其他页面上运行......任何建议？ –

您的JavaScript是狡猾的。你会添加两次'window.load'事件，这会使'todaysDate'函数运行两次。更重要的是，'footerSection.innerHTML'将导致错误，因为'footerSection'不存在 – cronoklee

链接到外部样式表和JavaScript文件

回答

相关问题