jQuery的hide(）和show(）的JavaScript等价物是什么?

What is the JavaScript equivalent of jQuery's hide() and show()?

本文关键字：等价物 是什么 JavaScript hide jQuery show      更新时间：2023-09-26

我有一个简单的隐藏和显示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" />

我遵循了下面评论中的一些代码，但它们不起作用：

<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>标签怎么办？

这

很简单

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

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

然后

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

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'; 
}

document.getElementById("button").style.visibility="visible|hidden|collapse|inherit";
相关文章：