getElementByClass
js005.html을 생성하고 js004.html의 내용을 복사한 후 p 태그를 추가
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="alert" class="alert-box" >
<p>알림창 제목</p>
<p>알림창 세부내용</p>
<button onclick="alertControl('none')">닫기</button>
</div>
<button onclick="alertControl('block', 'black')">버튼 1 </button>
<button onclick="alertControl('block', 'red')">버튼 2</button>
</body>
<script>
function alertControl(파라미터1, 파라미터2){
document.getElementById('alert').style.display = 파라미터1;
document.getElementById('alert').style.backgroundColor = 파라미터2;
}
</script>
</html>.text {
color : aquamarine;
}
main.css 파일에 text class의 css를 추가해보자.
p 태그 중 제목 부분만 fontSize 를 키우고 싶은데 어떻게 해야할까?
지금까지 해왔던 것처럼 원하는 p 태그에 id를 부여하고
document.getElementById('부여한ID').style.fontSize = "50px";이런식으로 해도 되겠지만 이번엔 다른 셀렉터를 사용해보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="alert" class="alert-box" >
<p class="text">알림창 제목</p>
<p class="text">알림창 세부내용</p>
<button onclick="alertControl('none')">닫기</button>
</div>
<button onclick="alertControl('block', 'black')">버튼 1 </button>
<button onclick="alertControl('block', 'red')">버튼 2</button>
</body>
<script>
function alertControl(파라미터1, 파라미터2){
document.getElementById('alert').style.display = 파라미터1;
document.getElementById('alert').style.backgroundColor = 파라미터2;
document.getElementsByClassName('text')[0].style.fontSize = "50px";
}
</script>
</html>이렇게 p 태그에 class를 부여하고
document.getElementsByClassName('text')[0].style.fontSize = "50px";'text'라는 이름의 클래스 중 [ 몇 번째] 의 fontSize를 50px로 변경해줘 라고 할 수 있다.
이외에도 getElementsByName , getElementsByTagName 과 같은 셀렉터가 있다.
Last updated