如何从缩略图中删除不透明度答案

【问题标题】：How to remove opacity form a thumbnail image如何从缩略图中删除不透明度
【发布时间】：2019-08-24 12:09:57
【问题描述】：

我正在尝试通过 JavaScript 去除缩略图的不透明度。

我有一个非常简单的用于幻灯片放映的 JavaScript 函数。该功能适用于幻灯片，但我还想删除缩略图的不透明度。

幻灯片是动态的，其中有一排通过带有<img src=...> 的 HTML 页面创建的可点击缩略图，然后缩略图位于所选缩略图的放大图像上方。在我下面的代码中，“enlargeProdThumb”是放大缩略图的 id，“thumbImg”是缩略图。我已经通过 CSS 设置了缩略图的不透明度，但是我想在选择缩略图作为源时删除不透明度。有没有办法用这么简单的脚本来做这件事，还是我用错了方法。

function slideShow(event){
  var thumbImg = event.target || event.srcElement;
  document.getElementById("enlargeProdThumb").src = thumbImg.getAttribute("src");
}

【问题讨论】：

你应该尝试使用 CSS 覆盖它。
“移除不透明度”对我来说意味着“使其透明”。如果是这种情况，thumbImg.style.opacity = 0 就是您问题的字面答案。
change image opacity using javascript的可能重复

标签： javascript

【解决方案1】：

如果您只需要使用 JavaScript 更改图像不透明度，请阅读这篇 Stack Overflow 帖子：change image opacity using javascript

长话短说 @stecb 分享了这个 sn-p：

var element = document.getElementById('id');
element.style.opacity = "0.9";
element.style.filter  = 'alpha(opacity=90)'; // IE fallback

【讨论】：

【解决方案2】：

我认为您应该制作一个减少不透明度的 css 类选择器，然后在 Javascript 中添加和删除类之间切换。

这是一个用于降低不透明度的示例 css：

.transparent-img {
  opacity: 0.5;
  filter: alpha(opacity=50); /* For IE8 and earlier */
}

用于将类添加到 dom 元素的 Javascript：

var element = document.getElementById("img#transparent");
element.classList.add("transparent-img");

用于从 dom 元素中删除类的 JavaScript：

var element = document.getElementById("img#transparent");
element.classList.remove("transparent-img");

【讨论】：

【解决方案3】：

也许这会有所帮助...

<!DOCTYPE html>
<script type="text/javascript">
function image(img) {
    var src = img.src;
    img.style.opacity = "0.4";
}
</script>

<img id="myImage" src="thumbImg style="width:100px" onclick="image(this)">
</html>

【讨论】：