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

问题描述

您好，

与类分配。我们得到了一个假装企业的HTML文件，Castaway Vacations LLC。分配的第一步是创建一个javascript函数，在单击特定链接时更改文本颜色，超链接颜色和图像。因此，当点击浪漫链接时，例如，读取选择心情的文本将变为红色，以及页面上的所有其他文本（包括其他超链接）。单击此链接也将更改图像。关于我们的老师发送的文件，有一件事是棘手的：没有匹配的CSS文件 - 我创建了一个包含类颜色的文件，除此之外，所有其他的样式都是内联的，我不习惯。下面是我的代码的JSfiddle链接：

UPDATE！

ve得到了更改文本颜色和图像的代码，但超链接颜色仍然没有改变。你可以看到我尝试在更新的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 =rightbgcolor =＃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>选择心情...< / i>< / b>< / font>< br> 
< font face = arial> 
< a id =onehref =＃>浪漫< / a>< br>< br> 
< a id =twohref =＃>冒险< / a>< br>< br> 
< a id =threehref =＃>放松< / a>< br>< br> 
< a id =fourhref =＃>家庭< / a>< br>< br>< br& 
< br> 
< a href =＃>要求宣传册...< / a> 
< / font> 
< / td> 
< td align =center>< img id =original.jpgsrc =orig_main.jpg> 
< br> < i>您的假期等待着！ 
 
< / tr> 
< / center> 
< script src =castaway.js>< / script> 
< / body> 
< / html> 
< / DOCTYPE> 
  

Javascript：

 code> 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  {
 if（links [i] .href）
 {
 links [i] .style.color =red; 
} 
} 
  

谢谢！

解决方案

确定，对于初学者来改变你只需要这样的东西的颜色

  function change_color（）{
 document.body.style.color =red; //这将文本的颜色改为RED 
 document.getElementById（image_to_change）。src =something.jpg; // change img src 
} 
  

使用该函数只需添加对函数的调用例如

 < a onClick =change_color（）; href =＃>浪漫< / a>< br>< br> 
  

好了，它已经接受的答案，只是想完成它，改变img src，首先需要为该img添加一个ID，例如

 < td align =center>< img id =image_to_changesrc =orig_main.jpg>< br>< i>您的假期等待着！ 
  

添加id后，你可以看到我如何添加这行到change_color / p>

  document.getElementById（image_to_change）。src =*** SOURCE_TO_YOUR_IMAGE ***; 
  

*工作代码*
fiddle http://jsfiddle.net/8ntdbek3/1/
i更改了几件事使它工作，首先，你需要明白，当你给一个ID的东西，在这种情况下的img（你给了idrom_main.jpg）的ID是你需要用来调用该元素，所以当您使用

  document.getElementById（orig_main.jpg）。src =rom_main.jpg; 
  

应该去

  document.getElementById（rom_main.jpg）。src =rom_main.jpg; 
  

因为您在此行中输入了idrom_main.jpg，id为orig_main。 jpg不存在！

 < td align =center>< img id = **rom_main.jpg **src = orig_main.jpg>< br>< i>您的假期等待着！ 
  

也很重要注意，你可以把任何你想要的id， jpg文件，它的东西，我不会推荐，因为它导致混乱。

我将ID更改为更可读的东西。

* EDIT更改颜色*

如果您还需要帮助评论，

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

  var list = document.getElementsByTagName（a）; 
 for（i = 0; i  list [i] .style.color =red; 
} 
  

你可以看到，我得到一个列表每个元素的标签 a，那么每个元素都会变成红色（或你想要的颜色）。

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

问候。 p>

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屋！