Question

我有一个项目要制作2个包含测试分数前后值的按钮。

该学生为50岁，每个学生都有2个按钮，其中包含他们在某个学科中以前和现在的考试成绩。该按钮位于“之前”和“之后”两列中，按最高分数排序，并根据其分数调整大小。因此，我们不知道如何识别那两个按钮。

所以我决定确定配对按钮的“ id”是否相同例如：id =“ Score1”和id =“ Score1_a”

现在，如果我们将鼠标悬停在其中一个上，则使“ Before”和“ After”列中的配对按钮的颜色变为红色。

但是还不够。因此，当我们将鼠标悬停在上面时，我使用脚本来使按钮变大，但是我不知道如何将其还原为原始大小。你们可以帮我吗？

这是我的脚本：

 <script>
  function mouseover(obj) {
 var id2=obj.id+"_a";
document.getElementById(obj.id).style.background = "magenta";
document.getElementById(obj.id).style.width = "100px";
document.getElementById(obj.id).style.height = "100px";
document.getElementById(id2).style.background = "magenta";
    }
  function mouseout(obj) {
 var id2=obj.id+"_a";
document.getElementById(obj.id).style.background = "deepskyblue";
document.getElementById(id2).style.background = "deepskyblue";
document.getElementById(obj.id).style.offsetwidth;
document.getElementById(obj.id).style.offsetheight;
   }
</script>

  <button id="score1" style='width:70px; height:70px;'>70</button>
  <button id="score1_a" style='width:65px; height:65px;'>65</button>
   <button id="score2" style='width:25px; height:25px;'>25</button>
   <button id="score2_a" style='width:50px; height:50px;'>50</button>

谢谢。

Answer 1

不确定您要实现的目标是什么，但是根据我的理解，在鼠标移开时我会保留其原始尺寸。我们有多种方法可以更有效地实现这一目标，但是要使您的代码正常工作，您将需要跟踪原始高度宽度以及每个按钮的宽度对。所以可以解决，

function mouseover(obj, pairId) {
  
	var id2=pairId;

	document.getElementById(obj.id).style.background = "magenta";
	document.getElementById(obj.id).style.width = "100px";
	document.getElementById(obj.id).style.height = "100px";
	document.getElementById(id2).style.background = "magenta";
}
function mouseout(obj, pairId, actualDim) {

	var id2=pairId;

	document.getElementById(obj.id).style.background = "deepskyblue";
	document.getElementById(id2).style.background = "deepskyblue";
	document.getElementById(obj.id).style.width = actualDim.w;
	document.getElementById(obj.id).style.height = actualDim.h;
}

 <button id="score1" style='width:70px; height:70px;' onmouseover="mouseover(this, 'score1_a')" onmouseout="mouseout(this, 'score1_a', {w:'70px', h:'70px'})">70</button>
  <button id="score1_a" style='width:65px; height:65px;' onmouseover="mouseover(this, 'score1')" onmouseout="mouseout(this, 'score1', {w:'65px', h:'65px'})">65</button>
  <button id="score2" style='width:25px; height:25px;' onmouseover="mouseover(this, 'score1')" onmouseout="mouseout(this, 'score1', {w:'25px', h:'25px'})">25</button>
  <button id="score2_a" style='width:50px; height:50px;' onmouseover="mouseover(this, 'score1')" onmouseout="mouseout(this, 'score1', {w:'50px', h:'50px'})">50</button>

放大并还原为原始大小的Javascript

1 个答案: