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

Question

I am trying to link my HTML home page to an external css stylesheet and an external javascript(.js) file. 我试图将我的HTML主页链接到外部CSS样式表和外部javascript（.js）文件。 For whatever reason depending on which order I list them in the HTML file, only one of them will work. 无论出于何种原因，取决于我在HTML文件中列出的顺序，只有其中一个可以使用。 I used a simple alert box in the Javascript file to test if it is working and it only does when the javascript file is linked first. 我在Javascript文件中使用了一个简单的警告框来测试它是否正常工作，它只在首先链接javascript文件时才会测试。 Here is my work...(I am an HTML noob by the way also) 这是我的工作......（我也是一个HTML菜鸟）

<!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>

here is the javascript code in the external file... 这是外部文件中的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);

Also, here is the code in the service information html doc... 另外，这里是服务信息html doc中的代码......

<!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>

Answer 1

Try this inside your <head> section: 在<head>部分中尝试此操作：

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

Make sure trinity.css , churchJavaScript.js and your html file are in the same folder. 确保trinity.css ， churchJavaScript.js和您的html文件位于同一文件夹中。

It's slightly better for performance on desktop websites to put the js before the css. 在桌面网站上将js放在css之前的性能稍好一些。 Read why here . 在这里阅读原因。

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

问题描述

1 个解决方案

解决方案1
5 2013-11-24 00:14:46

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

问题描述

1 个解决方案

解决方案1 5 2013-11-24 00:14:46

解决方案1
5 2013-11-24 00:14:46