<!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>
자, 여기에 간단한 코드가 있습니다. ".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] 삭제
몇 마디 만하겠습니다