728x90
반응형
자바스크립트로 HTML을 조작할 수 있다.
<h4>안녕하세요</h4>
안녕하세요 라고 적힌 글을
자바스크립트를 이용해서 조작 해 보자.
<h4 id="hello">안녕하세요</h4>
<script>
document.getElementById('hello').innerHTML='안녕안하세요';
document.getElementById('hello').style.background='red';
}
</script>
id를 hello로 만들어 준 뒤,
아래에 script 태그를 열어
document.getE... 블라블라 적어주면 된다.
innerHTML으로 내용을 안녕안하세요 로 바꾸고, style.background를 red로 설정했더니 잘 적용된 모습이다.
버튼을 누르면 나타나는 알림창 만들기
<div class="alert-box" id="alert">
알림창
<button class="btn" onclick="document.getElementById('alert').style.display='none';">닫기</button>
</div>
<button class="btn" onclick="document.getElementById('alert').style.display='block';">버튼</button>
알림창
버튼을 누르면 알림창이 열리고, 알림창에 있는 버튼을 누르면 다시 알림창이 없어진다.
이번에는 script 태그를 열지 않고, onclick 속성으로 바로 자바스크립트를 작성했다.
function 이용하기
<button class="btn" onclick="alertBtnOpen();">버튼</button>
<script>
function alertBtnOpen(){
document.getElementById('alert').style.display='block';
}
</script>
script태그 안에 function을 선언 해 두고 사용할 수 있다
이벤트리스너 사용하기
<div id="alert" class="alert"> 알림창</div>
<button id="btn"> 버튼임 </button>
<script>
document.getElementById('btn').addEventListener('click',function(){
document.getElementById('alert').style.display='block';
})
</script>
onclick 속성을 사용하지 않고,
addEventListener를 이용할 수 있다.
클릭 > click
호버 > mouseover
스크롤 > scroll
키 입력 > keydown 등등 수십가지가 있다.
(추가)
지금까지 getElementById를 사용했는데
이 외에도
ByClassName('클래스명')
ByClassName('클래스명')[0] => '클래스명'을 가진 0번째 요소
ByTagName
ByName
등등 있다.
728x90
반응형
'웹개발 > JavaScript' 카테고리의 다른 글
[자바스크립트] 변수를 이용하여 다크모드 버튼 만들어 보기 (0) | 2023.01.19 |
---|---|
[자바스크립트] 모달창 띄우기와 간단한 애니메이션 (0) | 2023.01.18 |
[자바스크립트] 조건문 사용하기 (0) | 2023.01.18 |
[자바스크립트] jQuery 라이브러리 사용하기 (0) | 2023.01.16 |
[자바스크립트] 서브메뉴 만들기 (0) | 2023.01.16 |
댓글