getElementByClass

js005.html을 생성하고 js004.html의 내용을 복사한 후 p 태그를 추가

js005.html

<!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>

main.css

.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 과 같은 셀렉터가 있다.

PreviousParameter2 NextEvent Listener(이벤트 리스너)

Last updated 1 year ago