<!DOCTYPE html>
<html>
<head>
<title>
Hide or show HTML elements using
visibility property in JavaScript
</title>
<style>
.container {
height: 80px;
width: 250px;
border: 2px solid black;
background-color: green;
color: white;
</style>
</head>
<body>
<center>
<div class="container">
<h1>Number of Child</h1>
</div>
<p class="container2">
Click the buttons to show
or hide the green box
</p>
<input type="radio" id="female" name="gender" value="female" onclick="showElement()"
checked>
<label for="female">Female</label>
<label for="male">Male</label>
<input type="radio" id="male" name="gender" value="male" onclick="hideElement()">
</center>
<script type="text/javascript">
function showElement() {
element = document.querySelector(".container");
element = document.querySelector(".container2");
element.style.visibility = 'visible';
}
function hideElement() {
element = document.querySelector(".container");
element = document.querySelector(".container2");
element.style.visibility = 'hidden';
}
</script>
</body>
</html>
好的,这是简单的代码,我要定位2个元素,分别是:“。container”和“ .container2”
但是方法document.querySelector
只能选择一个,我该如何解决?
链接到代码:https : //jsfiddle.net/7cgmq0tx/
第二个querySelector
覆盖第一个,您应该使用两个变量:
<script type="text/javascript">
function showElement() {
element1 = document.querySelector(".container");
element2 = document.querySelector(".container2");
element1.style.visibility = 'visible';
element2.style.visibility = 'visible';
}
function hideElement() {
element1 = document.querySelector(".container");
element2 = document.querySelector(".container2");
element1.style.visibility = 'hidden';
element2.style.visibility = 'visible';
}
</script>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句