Question

我正在尝试将我的HTML主页链接到外部css样式表和外部javascript（.js）文件。无论出于何种原因，取决于我在HTML文件中列出的顺序，只有其中一个可以使用。我在Javascript文件中使用了一个简单的警告框来测试它是否正常工作，它只在首先链接javascript文件时才会测试。这是我的工作......（顺便说一下，我也是一个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>

这是外部文件中的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 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

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

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

1 个答案: