<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM스타일변경</title>
<style>
div{
width : 300px;
height : 300px;
background-color: blue;
}
</style>
</head>
<body>
<div></div>
<button>원</button>
<button>직사각형</button>
<script>
// 1. 태그들 가져오기
let div = document.querySelector('div')
let btns = document.querySelectorAll('button')
// 2. 각각의 버튼들에 대한 이벤트 처리하기
btns[0].addEventListener('click', function(){
// 3. div 태그를 원 형태로 변경
div.style.backgroundColor = 'red'
div.style.borderRadius = '50%'
div.style.width = '300px'
})
btns[1].addEventListener('click', function(){
// 4. div 태그를 직사각형 형태로 변경
div.style.backgroundColor = 'green'
div.style.borderRadius = '0%'
div.style.width = '400px'
})
</script>
</body>
</html>
원 버튼 눌렀을때 결과
직사각형 버튼 눌렀을때 결과
'JavaScript' 카테고리의 다른 글
| [JavaScript] jQuery (요소 가져오기) (0) | 2022.05.31 |
|---|---|
| [JavaScript] jQuery 사용법 (0) | 2022.05.31 |
| [JavaScript] 이미지 변경하기 (0) | 2022.05.30 |
| [JavaScript] 위시리스트 만들기 (0) | 2022.05.30 |
| [JavaScript] input 태그 안에 텍스트 내용 알림 창 띄우기 (0) | 2022.05.27 |