（JavaScript / HTML）如何在按钮单击时更改样式属性的显示？答案

【问题标题】：(JavaScript / HTML) How to change display in style attribute on button click?（JavaScript / HTML）如何在按钮单击时更改样式属性的显示？
【发布时间】：2015-04-14 00:31:21
【问题描述】：

我是一名初级程序员，我想要加载但不显示的图像：

<img src="someImage.png" class="mainImage" id="image1" style="display:none"/>

我想添加一个按钮，然后将图像显示从无移除/更改以使其可见，以便可以通过单击按钮来显示每个图像。

谢谢！

【问题讨论】：

检查这个答案：stackoverflow.com/questions/6242976/…
将 style.display 属性设置为 ''（空字符串）。

标签： javascript html image button onclick

【解决方案1】：

试试这个

$("#btn").click(function(){
    $("#image1").show();
});

或者

$("#btn").click(function(){
     $("#image1").css("display", "block");
 });

【讨论】：

这需要 jQuery（我假设...）这个问题没有被标记也没有提到 jquery。
@ChadW: 不知道我只是假设他会对 jQuery 解决方案感兴趣 :-/

【解决方案2】：

您可以在 block 和 ""（空字符串）之间切换元素的显示。所以你可能有一个像这样的按钮：

<button onclick="toggleDisplay('image1')">Image 1</button>

还有一个 toggleDisplay 函数，例如：

function toggleDisplay(id) { 
  var el = document.getElementById(id);
  if (el && el.style) {
    el.style.display = el.style.display != 'none'? 'none' : '';
  } 
}

在 none 和 ""（空字符串）之间切换允许元素返回其默认值或继承值，并且函数变为通用。

【讨论】：

非常感谢！会试试看！