使用 Javascript 调整图像大小

问题描述

如果用户单击图像并在光标离开后保持其原始大小，我正在尝试使图像自身放大，但图像没有响应，这是一张 800 像素的图像。

behavIoUr.js：

document.addEventListener("DOMContentLoaded",function(event) {
    alert('Hello!');
});

document.getElementById("smart_thumbnail");

var thumbnailElement = document.getElementById("smart_thumbnail");

thumbnailElement.addEventListener("click",function() {
    alert('I saw you click');
});

var thumbnailElement = document.getElementById("smart_thumbnail");
thumbnailElement.className ="small";

if (thumbnailElement.className == "") {
    // write here the code that will execute if the image is big
}

index.html：

 <p>An 800 pixel image</p>
        <img id="smart_thumbnail"  src="http://calmground.com/wp-content/galler\
y/our-calm-ground/calm.jpg" class="small"  >

@kinglish， 我相信 img.small 是正确的 CSS 代码，虽然我没有复制您的代码，但我遵循了所有内容，似乎我的文件中的某个地方因为它没有运行而损坏。

Index.html：

<p>An 800 pixel image</p>
                <img id='smart_thumbnail'  src='http://download.baps.org/wallpapers/14.bmp' class='small'  >

behavior.js 我编辑过：

*document.addEventListener("DOMContentLoaded",function(event) {
   //  alert('Hello!');
});

document.getElementById("smart_thumbnail");

var thumbnailElement = document.getElementById("smart_thumbnail");

thumbnailElement.addEventListener("click",function({
    var theElement = event.target;
    // to toggle class names
    if (theElement.classList.contains('small')) {

        theElement.classList.remove('small');
        theElement.classList.add('large');
    }else {
        theElement.classList.remove('large');
        theElement.classList.add('small');
    }

});

styles.css:

img.small {
    width: 50px;
}

img.large {
    width: 200px;
}

解决方法

以下是在单击时调整图像大小并在脱离悬停时再次调整其大小的方法：

var enableHover = false;
document.addEventListener("DOMContentLoaded",function(event) {
    alert('Hello!');
});

document.getElementById("smart_thumbnail");

var thumbnailElement = document.getElementById("smart_thumbnail");

thumbnailElement.addEventListener("click",function() {
    this.classList.toggle('small');
    document.getElementById("label").innerHTML = "An 800 pixel image";
    enableHover = true;
});

thumbnailElement.addEventListener("mouseleave",function() {
  if (enableHover) {
    this.classList.toggle('small');
    document.getElementById("label").innerHTML = "A 100 pixel image";
    enableHover = false;
  }
})

.small {
  height: 100px;
}

<p id="label">A 100 pixel image</p>
<img id="smart_thumbnail"  src="https://placekitten.com/400/800" class="small">

<style>
  .small {
    height: 100px;
  }
</style>

<p id="label">A 100 pixel image</p>
<img id="smart_thumbnail" src="https://placekitten.com/400/800" class="small">

<script>
  var enableHover = false;
  document.addEventListener("DOMContentLoaded",function(event) {
    alert('Hello!');
  });

  document.getElementById("smart_thumbnail");

  var thumbnailElement = document.getElementById("smart_thumbnail");

  thumbnailElement.addEventListener("click",function() {
    this.classList.toggle('small');
    document.getElementById("label").innerHTML = "An 800 pixel image";
    enableHover = true;
  });

  thumbnailElement.addEventListener("mouseleave",function() {
    if (enableHover) {
      this.classList.toggle('small');
      document.getElementById("label").innerHTML = "A 100 pixel image";
      enableHover = false;
    }
  })
</script>