티스토리 뷰

프론트엔드/javaScript, jQuery

[javaScript] onclick 속성으로 button 기능 개발

celine_e 2021. 8. 16. 20:37

[onclick 속성으로 button 기능 개발]

버튼을 누르면 UI가 보이게 하는 코드입니다.

1. html과 css를 이용하여 UI 디자인을 합니다.
2. css display:none 을 이용하여 UI가 평소엔 보이지 않게 합니다.
3. 자바스크립트를 이용하여 버튼에 기능을 넣습니다.

[onclick]
1. html button 태그 내에 'onclick' 이라는 속성을 넣습니다.
2. 버튼 클릭 시 onclick 내부의 자바스크립를 실행하게 됩니다.
3. 열기버튼과 닫기 버튼을 눌렀을 때 css의 변경을 명시해주면 됩니다.

<button onclick="document.getElementById('alert').style.display = 'block';">열기 </button> 
<button onclick="document.getElementById('alert').style.display = 'none';">닫기</button>
<body>

  <p> 열기 버튼을 누르면 box가 나옵니다.</p>
  <p> 닫기 버튼을 누르면 box가 사라집니다 .</p> 
  <div class="alertBox" id="alert"> 
      <p> Alert Box </p> 
  </div> 
  <button onclick="document.getElementById('alert').style.display = 'block';">열기 </button> 
  <button onclick="document.getElementById('alert').style.display = 'none';">닫기</button> 
  
</body>

 

.alertBox { 
    display:none; 
    width: 300px; 
    height: 50px;
    background: #d6e6ff; 
    border-radius: 4px; 
    margin-bottom: 15px;
} 

.alertBox p {
    font-weight: 500; 
    line-height: 50px;
    text-align: center; 
    color: #8a8a8a; 
} 

button { 
    display: inline-block; 
    width: 150px;
    height: 35px; 
    line-height: 35px;
    background: #9abdf5; 
    color: #333;
    font-size: 14px; 
    font-weight: 500;
    text-align: center; 
    border: none; 
    border-radius: 4px; 
    margin-bottom: 7px; 
}

 

 

 

'프론트엔드 > javaScript, jQuery' 카테고리의 다른 글

[jQuery]버튼 클릭 후 url 복사 / toastPopup  (1) 2021.08.24
[jQuery] 높이에 따른 더보기 버튼 유무  (2) 2021.08.17
[javaScript] javaScript Drawing  (0) 2021.08.17
[javaScript] function의 파라미터 사용하여 button기능 개발  (0) 2021.08.17
[javaScript] function을 활용하여 button기능 개발  (0) 2021.08.16
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
글 보관함