时间戳

首页 > 解决方案 > 使按钮变大并将按钮恢复为原始大小 Javascript

javascript - 使按钮变大并将按钮恢复为原始大小 Javascript

问题描述

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

该学生 50 岁，每个学生都有 2 个按钮，其中包含他们在某些科目中以前和现在的考试成绩。该按钮放置在之前和之后的 2 列中，按最高分排序并根据他们的分数调整它们的大小。所以我们不知道如何识别这对按钮。

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

现在取得进展，如果我们将鼠标悬停在其中一个上，我会在“之前”和“之后”列中的配对按钮将其颜色更改为红色。

但这还不够。所以当我们将鼠标悬停在按钮上时，我使用脚本使按钮变大，但我不知道如何将其恢复为原始大小。你们能帮帮我吗？

这是我的脚本：

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

谢谢。

标签： javascriptphp

解决方案

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

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>

推荐阅读