JavaScript 요소에 클래스 추가
이 자습서에서는 JavaScript의classList속성을 사용하여 주어진 요소에 클래스를 추가하는 방법에 대해 설명합니다.
JavaScript에서classList속성을 사용하여 주어진 요소에 클래스 추가
JavaScript에서 주어진 요소에 클래스를 추가하려면classList속성을 사용할 수 있습니다. 먼저 주어진 요소를 가져와야하며이를 수행하는 가장 쉬운 방법은id를 사용하여 가져 오는 것입니다. id가 요소에 제공되지 않는다고 가정하십시오. 이 경우 고유 한id를 제공하고 JavaScript의getElementById속성을 사용하여 요소를 가져 와서 변수에 저장할 수 있습니다. 그런 다음classList속성을 사용하여 변수를 사용하여 속성을 변경할 수 있습니다. 예를 들어 버튼을 사용하여 텍스트의 클래스를 변경해 보겠습니다. 아래 코드를 참조하십시오.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
.newclass {
width: 90%;
padding: 30px;
background-color: red;
color: yellow;
font-size: 30px;
}
</style>
<body>
<button onclick="myFun()">Try it</button>
<div id="test">
Adding Class Test
</div>
<script type="text/javascript">
function myFun() {
var ob = document.getElementById("test");
ob.classList.add("newclass");
}
</script>
</body>
</html>
위의 코드에는 클래스 객체의 속성을 설정하는 스타일 태그가 있습니다. body 태그 안에는 버튼과 텍스트가 있고 script 태그 안에는id를 사용하여 텍스트의 클래스를 변경합니다. 이 예제에서 스타일 시트와 JavaScript 코드는 동일한 HTML 파일에 배치되지만 별도의 파일에 배치하고 HTML 파일에 링크 할 수도 있습니다. 위의 코드를 실행하려면 코드를 HTML 파일에 복사하고 브라우저를 사용하여 열어야합니다.
출력:
출력에서 볼 수 있듯이 버튼과 일부 텍스트가 있습니다. 이 버튼을 누르면 텍스트의 클래스가 변경됩니다.
버튼을 눌렀을 때 출력 :
출력에서 볼 수 있듯이 클래스 변경으로 인해 텍스트 모양이 변경됩니다. 이 예제에서는 버튼을 사용하여 요소의 클래스를 변경하지만 주어진 요소의 클래스를 변경하려는 조건을 변경할 수 있습니다. Internet Explorer 9에서는classList속성을 사용할 수 없습니다. 대신+=연산자를 사용하여 속성을 지정된 요소에 추가 할 수 있습니다. 아래 줄을 사용하여 script 태그 내myFun함수의 마지막 줄을 변경해야합니다.
ob.className += " newclass";
다른 클래스가있을 수 있으므로 클래스 이름 앞에 공백을 사용해야합니다.
