Question

我有一个页面，跨多个框架有大约300个链接。每个链接都有一个id，该id对应于至少一个其他帧中的id。我正在编写一个脚本，突出显示两个链接onmouseover。目前，我可以更改两个链接的文本颜色（见下文）。我想将单个单词后面的背景颜色更改为黄色，以使文本显示为高亮显示。

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

如何在保持窗口背景的其余部分不变的情况下更改链接的背景颜色？

Answer 1

您应该可以通过修改链接的style.backgroundColor来执行此操作：

window.parent.frames["frame2"].document.getElementById(id).style.backgroundColor = "yellow";

Answer 2

这是使用Techfoobar解决方案编辑的HTML。 ids也会改为以字母开头。

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

Answer 3

把它放在你的onmouseover事件中：

document.getElementById(id).style.backgroundColor = "red";

您需要在onMouseOut事件中添加具有初始背景颜色的相同说明。

例如

 onmouseover="document.getElementById(id).style.backgroundColor = 'red';" onmouseout = "document.getElementById(id).style.backgroundColor = 'white';"

Answer 4

首先，您的id不能只是一个数字，也不能以数字开头。编辑它，然后将document.getElementById(id).style.backgroundColor = "red";放在onmouseover和document.getElementById(id).style.backgroundColor = "black"; onmouseout事件中。

Answer 5

我认为你想要的是选择。

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

这会改变所选的文字背景颜色，是想要的行为吗？

如何在Mouseover上突出显示文本

5 个答案: