你好，
我需要类作业方面的帮助。我们得到了一个假冒企业“Castaway Vacations LLC”的 HTML 文件。作业的第一步是创建一个 javascript 函数，该函数在单击特定链接时更改文本颜色、超链接颜色和图像。因此，例如，当单击“浪漫”链接时，“选择心情”文本将变为红色，页面上的所有其他文本(包括其他超链接)也会变为红色。单击此链接也将更改图像。关于我们老师发送的文件，有一件棘手的事情是没有匹配的 CSS 文件——我自己创建了一个包含类颜色的文件，但除此之外，所有其他样式都是内联的，这是我不习惯的.这是我的代码的 JSfiddle 链接:
更新!
我已经获取了更改文本颜色和图像的代码，但超链接颜色仍然没有改变。您可以看到我尝试在更新的 javascript 中使用名为 colorLinks 的函数更改它们。不幸的是，这个功能不仅不起作用，而且还导致以前的(好的)功能也不起作用。感谢您的帮助。
http://jsfiddle.net/HappyHands31/twkm12r2/1/
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Castaway Vacations, LLC</title>
</head>
<body leftmargin=0 rightmargin=0 bgcolor=#ffcc99
text=#993300 link=#993300 vlink=#996633>
<br>
<table width=100% border=0 cellpadding=0 cellspacing=0>
<tr>
<td width=95% align="right" bgcolor=#ffffff>
<img src="castaway_logo.jpg">
<br>
<font face=arial>Vacations, LLC</font></td>
<td bgcolor=#ffffff> </td>
</tr>
</table>
<br><br>
<div align="center">
<table width=600>
<tr>
<td width=300 valign="top">
<font face=arial size=3><b><i>Select Mood...</i></b></font><br><br>
<font face=arial>
<a id="one" href="#">Romantic</a><br><br>
<a id="two" href="#">Adventure</a><br><br>
<a id="three" href="#">Relaxation</a><br><br>
<a id="four" href="#">Family</a><br><br><br>
<br>
<a href="#">Request A Brochure...</a>
</font>
</td>
<td align="center"><img id="original.jpg" src="orig_main.jpg">
<br> <i>Your Vacation Awaits!
</tr>
</center>
<script src="castaway.js"></script>
</body>
</html>
</DOCTYPE>
Javascript:
document.getElementById('one').addEventListener
('click', change_color);
document.getElementById('two').addEventListener
('click', change_color2);
document.getElementById('three').addEventListener
('click', change_color3);
document.getElementById('four').addEventListener
('click', change_color4);
function change_color(){
document.body.style.color = "red";
document.getElementById("original.jpg").src = "rom_main.jpg";
}
function change_color2(){
document.body.style.color = "blue";
document.getElementById("original.jpg").src = "adv_main.jpg";
}
function change_color3(){
document.body.style.color = "green";
document.getElementById("original.jpg").src = "rel_main.jpg";
}
function change_color4(){
document.body.style.color = "orange";
document.getElementById("original.jpg").src = "fam_main.jgp";
}
colorLinks ("#00FF00");
function colorLinks (hex)
var links = document.getElementsByTagName("a");
for(var i=0;i<links.length;i++)
{
if(links[i].href)
{
links[i].style.color = "red";
}
}
谢谢!
最佳答案
好的，对于初学者来说，改变一些东西的颜色你只需要做这样的事情
function change_color(){
document.body.style.color = "red"; // this will change the color of the text to RED
document.getElementById("image_to_change").src = "something.jpg"; // change img src
}
要使用该函数，只需将调用添加到您想要的函数中，例如
<a onClick="change_color();" href="#">Romantic</a><br><br>
嗯，它已经接受了答案，但只是想完成它，要更改 img src，首先你需要为该 img 添加一个 id，例如
<td align="center"><img id="image_to_change"src="orig_main.jpg"><br><i>Your Vacation Awaits!
添加 id 后，您可以看到我是如何将这一行添加到“change_color”函数的
document.getElementById("image_to_change").src = "***SOURCE_TO_YOUR_IMAGE***";
* 工作代码 * 好的，这是工作 fiddle http://jsfiddle.net/8ntdbek3/1/ 我改变了一些东西让它工作，首先，你需要明白当你给某物一个“ID”时，在这种情况下给 img(你给了 id“rom_main.jpg”)这个 ID 就是你需要的用来调用那个元素，所以当你使用
document.getElementById("orig_main.jpg").src = "rom_main.jpg";
它应该去
document.getElementById("rom_main.jpg").src = "rom_main.jpg";
因为你在这一行给了它id“rom_main.jpg”，而id“orig_main.jpg”不存在!
<td align="center"><img id=**"rom_main.jpg**" src="orig_main.jpg"><br><i>Your Vacation Awaits!
同样重要的是要注意，您可以输入任何您想要的 ID，因此重复 jpg 文件的名称是我不推荐的，因为它会导致混淆。
我将 ID 更改为更具可读性的内容，仅此而已。如果您仍然需要帮助，请在下方评论，我会尽力帮助您。
* 编辑以更改颜色 *
好的，最后我添加了几行代码来更改页面中每个元素的颜色，对于每次点击我添加了这些行:
var list = document.getElementsByTagName("a");
for (i = 0; i < list.length; i++) {
list[i].style.color = "red";
}
如您所见，我在列表中获取了带有标签“a”的每个元素，然后我将每个元素都变成了“红色”(或您想要的颜色)。
这是工作 fiddle http://jsfiddle.net/8ntdbek3/3/
问候。
关于更改文本颜色、超链接颜色和图像的 Javascript 函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33115033/