在点击事件上更改图像源并添加像素

Question

我正在尝试使用javascript更改一个带id的图像源，我也想根据我们点击+或 - 按钮添加/删除图片的宽度。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

知道什么是错的吗？

Answer 1

  

要获取宽度，请使用.clientWidth而不是.style.width

因此对于addpx使用sun_to_eclipse.clientWidth + 20 + "px";和

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

＆＃13;

＆＃13;

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

＆＃13;

#sun {
  width: 300px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

问题在于您的设置宽度。 style.width将返回带有一些数字的文本加上最后的单位。使用offsetWidth属性。

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

  if (sun == false) {
    sun_to_eclipse.src = "images/eclipse.jpg";
    sun = true;
  } else {
    sun_to_eclipse.src = "images/soleil.jpg";
    sun = false;
  }
}
var addpx = function() {
  var sun_to_eclipse = document.getElementById("sun");
  
  if (sun_to_eclipse.width <= "500") {
    sun_to_eclipse.style.width = sun_to_eclipse.offsetWidth + 20 + "px"
  }
}
var removepx = function() {
  var sun_to_eclipse = document.getElementById("sun");
  
  if (sun_to_eclipse.width >= "250") {
    sun_to_eclipse.style.width = sun_to_eclipse.offsetWidth - 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("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>

IMAGE ONCLICK：它无法正常工作，因为img.src包含图像的完整地址。例如

document.getElementById("sun").src;
"file:///C:/Users/Abhinav/Desktop/images/soleil.jpg" 

你可以使用变量

来解决这个问题

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

  if (sun == false) {
    sun_to_eclipse.src = "images/eclipse.jpg";
    sun = true;
  } else {
    sun_to_eclipse.src = "images/soleil.jpg";
    sun = false;
  }
}

Answer 3

利用 offsetWidth 来实现这一目标。

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.offsetWidth + 20 + "px"
  }
}
var removepx = function() {
  var sun_to_eclipse = document.getElementById("sun");
  
  if (sun_to_eclipse.width >= "250") {
    sun_to_eclipse.style.width = sun_to_eclipse.offsetWidth - 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("load", setupListeners);

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