I have a page that has about 300 links across multiple frames. Every link has an id that corresponds to an id in at least one other frame. I am writing a script that will highlight both links onmouseover. Currently, I can change the text color of both links (see below). I want to change the background color behind the individual word to yellow to make the text appear to be highlighted.
<html><head><title>Test</title>
<script>
function hey(id)
{document.getElementById(id).style.color = "red";
window.parent.frames["frame2"].document.getElementById(id).style.color = "red";}
function bye(id)
{document.getElementById(id).style.color = "black";
window.parent.frames["frame2"].document.getElementById(id).style.color = "black";}
</script>
</head>
<body>
<a id="1" class="word" onmouseover="hey(this.id)" onmouseout="bye(this.id)">hello</a>
<a id="2" class="word" onmouseover="hey(this.id)" onmouseout="bye(this.id)">world</a>....
</body></html>
How do I change the background color of a link while leaving the rest of window's background unchanged?
I have a page that has about 300 links across multiple frames. Every link has an id that corresponds to an id in at least one other frame. I am writing a script that will highlight both links onmouseover. Currently, I can change the text color of both links (see below). I want to change the background color behind the individual word to yellow to make the text appear to be highlighted.
<html><head><title>Test</title>
<script>
function hey(id)
{document.getElementById(id).style.color = "red";
window.parent.frames["frame2"].document.getElementById(id).style.color = "red";}
function bye(id)
{document.getElementById(id).style.color = "black";
window.parent.frames["frame2"].document.getElementById(id).style.color = "black";}
</script>
</head>
<body>
<a id="1" class="word" onmouseover="hey(this.id)" onmouseout="bye(this.id)">hello</a>
<a id="2" class="word" onmouseover="hey(this.id)" onmouseout="bye(this.id)">world</a>....
</body></html>
How do I change the background color of a link while leaving the rest of window's background unchanged?
Share Improve this question asked Feb 20, 2013 at 14:54 parapparap 1,9855 gold badges20 silver badges28 bronze badges5 Answers
Reset to default 2You should be able to do it by modifying style.backgroundColor of the link(s):
window.parent.frames["frame2"].document.getElementById(id).style.backgroundColor = "yellow";
Here's the edited HTML using Techfoobar's solution. The ids are also changed to begin with a letter.
<html><head><title>Test</title>
<script>
function hey(id)
{document.getElementById(id).style.color = "red";
document.getElementById(id).style.backgroundColor = "yellow";
window.parent.frames["frame2"].document.getElementById(id).style.color = "red";
window.parent.frames["frame2"].document.getElementById(id).style.backgroundColor = "yellow";}
function bye(id)
{document.getElementById(id).style.color = "black";
document.getElementById(id).style.backgroundColor = "white";
window.parent.frames["frame2"].document.getElementById(id).style.color = "black";
window.parent.frames["frame2"].document.getElementById(id).style.backgroundColor = "white";}
</script>
</head>
<body>
<a id="w1" class="word" onmouseover="hey(this.id)" onmouseout="bye(this.id)">hello</a>
<a id="w2" class="word" onmouseover="hey(this.id)" onmouseout="bye(this.id)">world</a>....
</body></html>
Put this in your onmouseover event :
document.getElementById(id).style.backgroundColor = "red";
You need to put the same instruction with your initial background color on the onMouseOut event.
For example
onmouseover="document.getElementById(id).style.backgroundColor = 'red';" onmouseout = "document.getElementById(id).style.backgroundColor = 'white';"
First of all, your id cannot be a number only, nor it can start with a number. Edit it, then place this: document.getElementById(id).style.backgroundColor = "red"; in your onmouseover and document.getElementById(id).style.backgroundColor = "black"; in your onmouseout event.
I think what you want is the selection .
function hey(id)
{
var frame_2_element = window.parent.frames["frame2"].document.getElementById(id);
document.getElementById(id).style.color = "red";
frame_2_element.style.color = "red";
frame_2_element.mozSelection = "yellow";
frame_2_element.body.mozSelection = "yellow";
}
this will change the selected text background color , is that the wanted behavior ?
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744761350a4592193.html
评论列表（0条）