更改文本颜色，超链接颜色和图像的Javascript函数

时间：2015-10-14 01:08:33

标签： javascript jquery html css hyperlink

enter image description here

嗨，

我需要帮助进行课堂作业。我们获得了一个伪造业务的HTML文件，“Castaway Vacations LLC”。赋值的第一步是创建一个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>&nbsp;</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";  
      }
}

谢谢！

1 个答案:

答案 0 :(得分：4)

好的，首先要改变你需要做的事情的颜色

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后，您可以看到我如何将此行添加到＆＃34; change_color＆＃34;功能

document.getElementById("image_to_change").src = "***SOURCE_TO_YOUR_IMAGE***";

*工作代码* 好的，这是工作小提琴http://jsfiddle.net/8ntdbek3/1/ 我改变了一些事情以使其发挥作用，首先，你需要了解当你提供一个＆＃34; ID＆＃34;对于某些东西，在这种情况下是img（你给了id＆＃34; rom_main.jpg＆＃34;）ID就是你需要用来调用那个元素的，所以当你使用时

document.getElementById("orig_main.jpg").src = "rom_main.jpg";

应该去

document.getElementById("rom_main.jpg").src = "rom_main.jpg";

因为你给了它id＆＃34; rom_main.jpg＆＃34;在这一行，和id＆＃34; orig_main.jpg＆＃34;不存在！ 

 <td align="center"><img id=**"rom_main.jpg**" src="orig_main.jpg"><br><i>Your Vacation Awaits!

同样重要的是要注意你可以输入你想要的任何id，所以重复jpg文件的名称是我不推荐的东西，因为它会导致混淆。

我将ID更改为更具可读性的内容。如果您仍需要下面的帮助评论，我会尽力帮助您。

*编辑改变颜色*

好的，最后我添加了几行代码来更改页面中每个元素的颜色，对于每个onclick我添加以下这些行：

var list = document.getElementsByTagName("a");     
for (i = 0; i < list.length; i++) { 
  list[i].style.color = "red";  
}

正如你所看到的，我列出了每个带有标签＆＃34; a＆＃34;的元素，然后每个元素我把它变成＆＃34;红色＆＃34; （或你想要的颜色）。

这是工作小提琴http://jsfiddle.net/8ntdbek3/3/

问候。

相关问题
最新问题