document에 el를 찾으면 DOM을 찾았다고 함
1. DOM 숨기기
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <title>Title</title> <style> .box { border: 1px solid black; padding: 10px; } </style> </head> <body> <h1>숨기기</h1> <button onclick="hideDisplay()">display로 숨기기</button> <button onclick="hideVisible()">visible로 숨기기</button> <div class="box"> <div class="box" id="innerBox1"> 내부박스1 </div> <div class="box" id="innerBox2"> 내부박스2 </div> </div> <script> function hideDisplay() { let el = document.querySelector("#innerBox1"); el.style.display = "none"; } function hideVisible() { let el = document.querySelector("#innerBox2"); el.style.visibility = "hidden"; } </script> </body> </html>
2. JQuery로 숨기기
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <title>Title</title> <style> .box { border: 1px solid black; padding: 10px; } </style> </head> <body> <h1>숨기기</h1> <button onclick="hideDisplay()">display로 숨기기</button> <button onclick="hideVisible()">visible로 숨기기</button> <div class="box"> <div class="box" id="innerBox1"> 내부박스1 </div> <div class="box" id="innerBox2"> 내부박스2 </div> </div> <script> function hideDisplay() { // let el = document.querySelector("#innerBox1"); // el.style.display = "none"; $("#innerBox1").hide; } function hideVisible() { // let el = document.querySelector("#innerBox2"); // el.style.visibility = "hidden"; $("#innerBox2").css("visibility", "hidden"); } </script> </body> </html>
3. 2번을 업그레이드하기
- 재사용 가능
function a(){ $("#btn=hide1").hide(); } $("#btn=hide1").click(a); $("#btn=hide1").click(b);
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <title>Title</title> <style> .box { border: 1px solid black; padding: 10px; } </style> </head> <body> <h1>숨기기</h1> <button onclick="hideDisplay()">display로 숨기기</button> <button onclick="hideVisible()">visible로 숨기기</button> <div class="box"> <div class="box" id="innerBox1"> 내부박스1 </div> <div class="box" id="innerBox2"> 내부박스2 </div> </div> <script> function hideDisplay() { // let el = document.querySelector("#innerBox1"); // el.style.display = "none"; $("#innerBox1").hide; } function hideVisible() { // let el = document.querySelector("#innerBox2"); // el.style.visibility = "hidden"; $("#innerBox2").css("visibility", "hidden"); } </script> </body> </html>
4. DOM 나타내기
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box { border: 1px solid black; padding: 10px; } #innerBox1 { display: none; } #innerBox2 { visibility: hidden; } </style> </head> <body> <h1>나타내기</h1> <button onclick="showByDisplay()">display로 나타내기</button> <button onclick="showByVisible()">visible로 나타내기</button> <div class="box" id="outerBox"> <div class="box" id="innerBox1"> 내부박스1 </div> <div class="box" id="innerBox2"> 내부박스2 </div> </div> <script> function showByDisplay() { let el = document.querySelector("#innerBox1"); el.style.display = "block"; } function showByVisible() { let el = document.querySelector("#innerBox2"); el.style.visibility = "visible"; } </script> </body> </html>
Share article
