-
button에 style적용 예제
특정 대상이 화면에 사라짐: document.querySelector('#id').style.display = "none";
특정 대상이 화면에 나타남: document.querySelector('#id').style.display = "block";<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- <link rel="stylesheet" href="t1.css"> --> <style> #quizs1 { position: relative; width: 500px; height: auto; padding: 15px 20px; margin: auto; } button { background-color: rgba(255, 255, 255, 0.7); padding: 5px; border: 1px solid #ccc; font-size: 0.8em; } .openclass { position: absolute; left: 15px; bottom: -10px; } .answerclass { width: 400px; text-align: left; line-height: 1.8; display: none; } </style> </head> <body> <div id="quizs1"> <h4>quiz1</h4> <p>test text1</p> <p>test text2</p> <p>test text3</p> <!-- <img src="i1.jpg" alt=""> --> <button class="openclass" id="openbtn" onclick="showAnswer()">정답 보기</button> <div id="descdiv" class="answerclass"> <h4>correct answer</h4> <p>correct answer text1</p> <p>correct answer text2</p> <button id="closebtn" onclick="hideAnswer()">정답 닫기</button> </div> </div> <script> function showAnswer() { document.querySelector('#descdiv').style.display = "block"; document.querySelector('#openbtn').style.display = "none"; } function hideAnswer() { document.querySelector('#descdiv').style.display = "none"; document.querySelector('#openbtn').style.display = "block"; } </script> </body> </html>quiz1
test text1
test text2
test text3
correct answer
correct answer text1
correct answer text2
'Html Css JavaScript' 카테고리의 다른 글
그리드 레이아웃(grid layout) (0) 2022.11.16 css 미디어쿼리(media queries) (0) 2022.11.16 css display block, inline (0) 2022.11.16 css position (0) 2022.11.16 float을 이용한 화면 layout 구성 Ex (0) 2022.11.14 float (0) 2022.11.14 레벨요소 - 블록, 인라인 (0) 2022.11.14 CSS (0) 2022.11.14