jQuery 的 hide() 和 show() 的 JavaScript 等价物是什么？ [复制]

Question

我有一个简单的隐藏和显示 jQuery 代码，我想问一下是否有与 JavaScript 等效的代码？这是我的代码。

$(document).ready(function() {
  $("#myButton").hide();
  $("#1").click(function() {
    $("#myButton").show();
    $("#myButton").click(function() {
      $("#myButton").hide();
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option id="1">Science</option>
</select>
<input type="button" value="Click" id="myButton" />

我遵循了以下 cmets 的一些代码，但它们不起作用：

<script>
  document.getElementById('myButton').style.display = 'none';

  function selectOptionsupdated(select) {
    document.getElementById('myButton').style.display = 'block';
  }
</script>

<select onSelect="selectOptionsupdated(this)">
  <option id="1">Science</option>
</select>
<input type="button" value="Click" id="myButton" />

我想要的是一开始按钮是隐藏的，当我点击<option>标签“科学”时，按钮会出现，当我点击按钮时，按钮被点击后隐藏。如果有更多的<option> 标签呢？

Answer 1

这很简单

document.getElementById('myElement').style.display = 'block'; // show
document.getElementById('myElement').style.display = 'none'; // hide

在您的选择中添加onSelect="selectOptionsupdated(this)

然后

function selectOptionsupdated(select){
//do your stuff here  
}

Answer 2

var myButton = document.getElementById('myButton');

//hide
myButton.style.display = 'none';

//show
myButton.style.display = 'block';

更新 为您的选择标签..试试这个

html

<select id="list">
<option id="1">Science</option>
</select>

js

var list = document.getElementById('select');

list.addEventListener('change', listSelect, false);

function listSelect(){    
    var selected = list.options[list.selectedIndex].value;//Selected option value    //hide
    myButton.style.display = 'none';

    //show
    myButton.style.display = 'block'; 
}

Answer 3

document.getElementById("button").style.visibility="visible|hidden|collapse|inherit";