Question

我在这里丢失了一些东西

<!-- image is 1920 × 1080 pixels (W x H) -->
<a href="https://persagen.com/files/misc/postgres-x_on-pset_align_wrapped.png/"><img alt="postgres-x_on-pset_align_wrapped.png/" onmouseover="iyu3Pheu(this)" onmouseout="Xio8Hogh(this)" border="0" src="https://persagen.com/files/misc/postgres-x_on-pset_align_wrapped.png" width="300" style="padding-left:1px;"></a>
<script>
  function iyu3Pheu(x) {
    if(x.style.width < 500){
      x.style.width = "50%";
    }
    else {
      x.style.width = "100%";
    }
  }
  function Xio8Hogh(x) {
    x.style.width = "300px";
  }
</script>

问题是我需要将鼠标悬停在图像上两次以获得正确调整大小的onmouseover图像（大概是第一个onmouseover才能获得图像尺寸）。我想念什么？

这是一个JS Bin：https://jsbin.com/tesesi/edit?html,output

Answer 1

问题在于，x.style.width第一次将鼠标悬停在图像上时未返回任何内容，因为您没有在style标签中定义宽度（第二次起作用是因为在鼠标移开时您正在定义图像中的宽度使用Xio8Hogh函数的CSS）。您需要做的就是将宽度移动到CSS中，而不使用width属性。

一些建议：首先，以一种可以解释功能将要执行的功能的方式命名您的功能，而不仅仅是胡说八道。这将使您更容易调试，并且如果您在团队中工作，也将使团队成员更容易理解您的代码在做什么。另外，请尝试在样式表中定义CSS，而不是在HTML中内联。这将使您的代码更整洁。

<!-- image is 1920 × 1080 pixels (W x H) -->
<a href="https://persagen.com/files/misc/postgres-x_on-pset_align_wrapped.png/"><img alt="postgres-x_on-pset_align_wrapped.png/" onmouseover="iyu3Pheu(this)" onmouseout="Xio8Hogh(this)" border="0" src="https://persagen.com/files/misc/postgres-x_on-pset_align_wrapped.png" style="width:300px;padding-left:1px;"></a>
<script>
  function iyu3Pheu(x) {
    if(x.style.width < 500){
      x.style.width = "50%";
    }
    else {
      x.style.width = "100%";
    }
  }
  function Xio8Hogh(x) {
    x.style.width = "300px";
  }
</script>

就此而言，我还想提到此功能可以完全在CSS中完成，而无需像这样的JavaScript：

img {
  width:300px;
}

a:hover img {
  width:100%
}

<a href="https://persagen.com/files/misc/postgres-x_on-pset_align_wrapped.png/"><img alt="My Image" border="0" src="https://persagen.com/files/misc/postgres-x_on-pset_align_wrapped.png"></a>

鼠标悬停时调整图像大小

1 个答案: