Javascript 单击按钮时隐藏显示脚本

我想在单击按钮时隐藏显示我的脚本当前我有一个创建iframe的脚本，但它始终可见。我想在该脚本中添加一个按钮以附加折叠功能，即 单击它可最大化/最小化iframe

剧本

要将按钮与iframe一起添加到此脚本中，该iframe可以在单击按钮时隐藏或显示

任何帮助都将不胜感激

<button id="button">Toggle iFrame</button>

---

工作小提琴：

我建议您在javascript之外创建html元素，除非您需要。但这里有一个全javascript解决方案：

<script type='text/javascript' charset='utf-8'>
  var iframe = document.createElement('iframe');
  iframe.src = 'http://www.google.com';
  iframe.style.position = 'fixed';
  iframe.style.bottom='1%'
  iframe.style.right='1%'
  iframe.width = '315px';
  iframe.height = '380px';
  iframe.id = 'theIframe';
  document.body.appendChild(iframe);

  var collapseButton = document.createElement('button');
  collapseButton.innerHTML = "Collapse!";
  collapseButton.onclick = function() {
    var iframe = document.getElementById('theIframe');
    iframe.style['display'] = iframe.style['display'] === 'none' ? 'block' : 'none';
  }
  document.body.appendChild(collapseButton);
</script>

---

此外，JQuery还提供.show、.hide和.toggle方法

@WashingtonGuedes你为什么要编辑高度而不是可见性？工作完成了

var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
iframe.src = 'http://www.google.com';
iframe.style.position = 'fixed';
iframe.style.bottom='1%'
iframe.style.right='1%'
iframe.width = '315px';
iframe.height = '380px';
iframe.style.display = 'none';

document.getElementById('button').addEventListener('click', function() {
  iframe.style.display = iframe.style.display === 'block' ? 'none' : 'block';
});

<script type='text/javascript' charset='utf-8'>
  var iframe = document.createElement('iframe');
  iframe.src = 'http://www.google.com';
  iframe.style.position = 'fixed';
  iframe.style.bottom='1%'
  iframe.style.right='1%'
  iframe.width = '315px';
  iframe.height = '380px';
  iframe.id = 'theIframe';
  document.body.appendChild(iframe);

  var collapseButton = document.createElement('button');
  collapseButton.innerHTML = "Collapse!";
  collapseButton.onclick = function() {
    var iframe = document.getElementById('theIframe');
    iframe.style['display'] = iframe.style['display'] === 'none' ? 'block' : 'none';
  }
  document.body.appendChild(collapseButton);
</script>