更改文本颜色、超链接颜色和图像的 Javascript 函数 [英] Javascript Function that changes Text Color, Hyperlink Color, and Image

查看：15
本文介绍了更改文本颜色、超链接颜色和图像的 Javascript 函数的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我需要关于课堂作业的帮助.我们收到了一个 HTML 文件，用于假装业务Castaway Vacations LLC".任务的第一步是创建一个 javascript 函数，该函数在单击特定链接时更改文本颜色、超链接颜色和图像.因此，例如，当单击浪漫"链接时，选择心情"的文本以及页面上的所有其他文本(包括其他超链接)将变为红色.单击此链接也会更改图像.关于我们老师发送的文件的一件棘手的事情是没有匹配的 CSS 文件 - 我自己创建了一个包含类颜色的文件，但除此之外，所有其他样式都是内联的，我不习惯.这是我的代码的 JSfiddle 链接:

更新！

我已经编写了更改文本颜色和图像的代码，但超链接颜色仍然没有改变.您可以看到我尝试使用更新后的 javascript 中名为 colorLinks 的函数更改它们.不幸的是，这个功能不仅不起作用，而且还导致之前的(好的)功能也不起作用.谢谢你的帮助.

http://jsfiddle.net/HappyHands31/twkm12r2/1/>

HTML:

<头><title>Castaway Vacations, LLC</title><body leftmargin=0 rightmargin=0 bgcolor=#ffcc99text=#993300 link=#993300 vlink=#996633><br><表格宽度=100%边框=0单元格填充=0单元格间距=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><br><br><div align="center"><表格宽度=600><tr><td width=300 valign="top"><font face=arial size=3><b><i>选择心情...</i></b></font><br><br><font face=arial><a id="one" href="#">浪漫</a><br><br><a id="two" href="#">Adventure</a><br><br><a id="three" href="#">放松</a><br><br><a id="four" href="#">家庭</a><br><br><br><br><a href="#">索取小册子...</a></td><td align="center"><img id="original.jpg" src="orig_main.jpg"><br><i>你的假期在等着你！</tr></中心><script src="castaway.js"></script></DOCTYPE>

Javascript:

document.getElementById('one').addEventListener('点击', change_color);document.getElementById('two').addEventListener('点击', change_color2);document.getElementById('three').addEventListener('点击', change_color3);document.getElementById('four').addEventListener('点击', change_color4);函数change_color(){document.body.style.color = "红色";document.getElementById("original.jpg").src = "rom_main.jpg";}函数change_color2(){document.body.style.color = "蓝色";document.getElementById("original.jpg").src = "adv_main.jpg";}函数change_color3(){document.body.style.color = "绿色";document.getElementById("original.jpg").src = "rel_main.jpg";}函数change_color4(){document.body.style.color = "橙色";document.getElementById("original.jpg").src = "fam_main.jgp";}颜色链接(#00FF00")；函数 colorLinks(十六进制)var links = document.getElementsByTagName("a");for(var i=0;i

谢谢！

解决方案

好的，对于初学者来说，你只需要做这样的事情就可以改变颜色

function change_color(){document.body.style.color = "红色";//这会将文本的颜色更改为红色document.getElementById("image_to_change").src = "something.jpg";//改变 img src}

要使用该函数，只需在需要的地方添加对函数的调用，例如

好吧，它已经接受了答案，但只是想完成它，要更改 img src，首先您需要为该 img 添加一个 id，例如

<td align="center"><img id="image_to_change"src="orig_main.jpg"><br><i>你的假期在等着你！

添加 id 后，您可以看到我如何将这一行添加到change_color"函数中

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

* 工作代码 *好的，这是工作小提琴 http://jsfiddle.net/8ntdbek3/1/我更改了一些东西以使其工作，首先，您需要了解当您为某物提供ID"时，在这种情况下为 img(您提供了 idrom_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>你的假期在等着你！

还需要注意的是，您可以输入任何您想要的 id，因此我不建议重复 jpg 文件的名称，因为这会导致混淆.

我将 ID 更改为更具可读性的内容，仅此而已.如果您仍然需要帮助，请在下方评论，我会尽力帮助您.

* 编辑改变颜色 *

好的，最后我添加了几行代码来更改页面中每个元素的颜色，对于每次点击我添加这些行:

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

如您所见，我将每个带有标签a"的元素放入列表中，然后将每个元素都变成红色"(或您想要的颜色).

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

问候.

Hi,

I need help with a class assignment. We were given an HTML file for a pretend business, "Castaway Vacations LLC". The first step in the assignment is to create a javascript function that changes the Text Color, Hyperlink Color, and Image when a particular link is clicked. So when the "Romantic" link is clicked, for example, the text that reads "Select Mood" will change to red, along with all other text on the page (including the other hyperlinks). Clicking this link will also change the image. One thing that's tricky about the file that our teacher sent is that there isn't a matching CSS file - I created one myself that contains the class colors, but besides that, all the other styles are inline, which I'm not used to. Here is the JSfiddle link to my code:

UPDATE!

I've gotten the code down for changing text color and image, but the hyperlink colors still aren't changing. You can see my attempt at changing them with the function named colorLinks in the updated javascript. Unfortunately, not only does this function not work, it's also causing the previous (good) functions to not work as well. Thanks for your help.

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";  
      }
}

Thank you!

解决方案

ok, for starters to change color of something you just need to do something like this

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
}

to use the function just add the call to the function where you want it, for example

  <a onClick="change_color();" href="#">Romantic</a><br><br>

well, its already accepted answer, but just wanted to complete it, to change the img src of, first you need to add an id for that img, for example

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

after you added the id, you can see how i added this line to the "change_color" function

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

* Working Code * OK, here is the working fiddle http://jsfiddle.net/8ntdbek3/1/ i changed a few things to make it work, first, you need to understand that when you give an "ID" to something, in this case to the img (you gave the id "rom_main.jpg") the ID is what you need to use to call that element, so when you are using 

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

it should go 

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

since you gave it the id "rom_main.jpg" in this line, and the id "orig_main.jpg" does not exist! 

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

also its important to note that you can put ANY id that you want, so repeating the name of the jpg file its something that i would not recommend, since it leads to confusion.

I changed the ID to something more readable and thats it. if you still need help comment below and i'll do my best to help you.

* EDIT to change color *

ok, finally i added a few lines of code to change the color of EVERY element in your page, for each onclick i adde these lines:

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

as you can see, i get in a list every element with the tag "a", then every element i turn it into "red" (or the color you want).

here is the working fiddle http://jsfiddle.net/8ntdbek3/3/

regards.

这篇关于更改文本颜色、超链接颜色和图像的 Javascript 函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆