javascript - 单击事件更改图像源并添加像素

Question

我正在尝试使用 javascript 更改带有 id 的图像源，我还想根据我们是单击 + 还是 - 按钮来添加/删除图片的宽度。

var changeimg = function() {
  var sun_to_eclipse = document.getElementById("sun");
  
  if (sun_to_eclipse.src == "images/soleil.jpg") {
    sun_to_eclipse.src = "images/eclipse.jpg";
  } else {
    sun_to_eclipse.src = "images/soleil.jpg";
  }
}
var addpx = function() {
  var sun_to_eclipse = document.getElementById("sun");
  
  if (sun_to_eclipse.width <= "500") {
    sun_to_eclipse.style.width = sun_to_eclipse.style.width + "20px"
  }
}
var removepx = function() {
  var sun_to_eclipse = document.getElementById("sun");
  
  if (sun_to_eclipse.width >= "250") {
    sun_to_eclipse.style.width = sun_to_eclipse.style.width - "20px"
  }
}

var setupListeners = function() {
  var plus = document.getElementById("plus");
  var minus = document.getElementById("minus");
  var sun_to_eclipse = document.getElementById("sun");
  
  sun_to_eclipse.addEventListener("click", changeimg);
  
  plus.addEventListener("click", addpx);
  minus.addEventListener("click", removepx);
}

window.addEventListener("load", setupListeners);

<div id="doc">
  <div id="buttons">
    <button id="plus">+</button>
    <button id="minus">-</button>
  </div>
  <img id="sun" src="https://pbs.twimg.com/profile_images/641353910561566720/VSxsyxs7_400x400.jpg" alt="sunny" />
</div>

知道哪里出了问题吗？

Answer 1

To Fetch the Width use .clientWidth instead of .style.width

所以对于 addpx 使用 sun_to_eclipse.clientWidth + 20 + "px"; 和

减去使用 sun_to_eclipse.clientWidth - 20 + "px";

var changeimg = function() {
  var sun_to_eclipse = document.getElementById("sun");

  if (sun_to_eclipse.src == "https://camo.githubusercontent.com/e9c5fe6cb160f55f564723b8c1679170c74f5e53/687474703a2f2f73392e706f7374696d672e6f72672f7a336e707077797a332f73686565705f333530782e6a7067") {
    sun_to_eclipse.src = "http://www.ptahai.com/wp-content/uploads/2016/06/Best-Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg";
  } else {
    sun_to_eclipse.src = "https://camo.githubusercontent.com/e9c5fe6cb160f55f564723b8c1679170c74f5e53/687474703a2f2f73392e706f7374696d672e6f72672f7a336e707077797a332f73686565705f333530782e6a7067";
  }
}


var addpx = function() {
  var sun_to_eclipse = document.getElementById("sun");

  if (sun_to_eclipse.clientWidth <= "500") {
    sun_to_eclipse.style.width = sun_to_eclipse.clientWidth + 20 + "px";
  }
}
var removepx = function() {
  var sun_to_eclipse = document.getElementById("sun");

  if (sun_to_eclipse.clientWidth >= "250") {
    sun_to_eclipse.style.width = sun_to_eclipse.clientWidth - 20 + "px";
  }
}

var setupListeners = function() {
  var plus = document.getElementById("plus");
  var minus = document.getElementById("minus");
  var sun_to_eclipse = document.getElementById("sun");

  sun_to_eclipse.addEventListener("click", changeimg);

  plus.addEventListener("click", addpx);
  minus.addEventListener("click", removepx);
}

window.addEventListener("click", setupListeners);

#sun {
  width: 300px;
}

<div id="doc">
  <div id="buttons">
    <button id="plus">+</button>
    <button id="minus">-</button>
  </div>
  <img id="sun" src="https://cdn.pixabay.com/photo/2018/03/11/20/42/mammals-3218028_1280.jpg" alt="sunny" />
</div>