JavaScript에서 속성 변경
이 튜토리얼에서는 JavaScript에서 setAttribute() 기능을 사용하여 요소의 속성을 변경하는 방법에 대해 설명합니다.
JavaScript에서 setAttribute() 함수를 사용하여 요소의 속성 변경
JavaScript에서 setAttribute() 함수를 사용하여 HTML 요소의 속성을 변경할 수 있습니다.
HTML 요소에 이미 속성이 있다고 가정합니다. 이 경우 setAttribute() 함수는 이전 속성을 업데이트하고 HTML 요소에 속성이 없으면 setAttribute() 함수는 요소에 새 속성을 추가합니다.
setAttribute() 함수의 기본 구문은 다음과 같습니다.
element.setAttribute(name, value)
setAttribute() 함수는 위의 구문에 표시된 대로 name과 value의 두 인수를 허용합니다. name 인수는 class 및 id와 같은 속성의 이름을 지정하는 문자열입니다.
setAttribute() 함수의 value 인수도 문자열이며 이름이 첫 번째 인수로 주어진 인수의 값을 설정하는 데 사용됩니다. setAttribute() 함수는 값을 반환하지 않습니다.
위 구문에서 요소는 속성을 설정하려는 요소입니다. querySelector(), getElementById(), getElementByClassName() 등과 같은 많은 기능을 사용하여 JavaScript에서 HTML 요소를 가져올 수 있습니다.
위의 모든 함수의 기본 구문은 다음과 같습니다.
const MyElement = document.querySelector(ElementName);
const MyElement = document.getElementById(ElementID);
const MyElement = document.getElementByClassName(ElementClassName);
위의 구문에서 querySelector() 함수는 div, h1 등과 같은 요소의 이름을 지정하는 문자열 값을 허용합니다. getElementById() 함수는 요소의 id를 지정하는 문자열 값을 허용합니다. id 키워드를 사용하여 모든 HTML 요소에 제공할 수 있습니다.
getElementByClassName() 함수는 요소의 클래스 이름을 지정하는 문자열 값을 허용하며 class 키워드를 사용하여 모든 HTML 요소에 제공할 수 있습니다. 위의 모든 함수는 함수의 입력 문자열이 여러 HTML 요소와 함께 사용되는 경우 단일 및 다중 요소를 반환합니다.
여러 요소의 경우 모든 요소의 속성이 변경됩니다. 단일 요소의 속성을 설정하려면 각 요소에 다른 클래스 이름이나 ID를 지정해야 합니다.
예를 들어 setAttribute() 함수를 사용하여 요소의 class 속성을 설정해 보겠습니다. 아래 코드를 참조하십시오.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.test1 {
font-size: 50px;
color: blue;
}
.test2 {
font-size: 100px;
color: red;
}
</style>
</head>
<body>
<h1 id="id1" class="test1">set attribute</h1>
<script>
const MyElement = document.getElementById("id1");
MyElement.setAttribute("class", "test2");
</script>
</body>
</html>
출력:
위의 코드에서 h1 태그를 사용하여 텍스트를 표시하고 요소에 id 및 클래스 이름을 추가했습니다. style 태그를 사용하여 h1 태그의 속성을 변경하는 데 사용할 두 가지 스타일을 만들었습니다.
JavaScript 코드를 작성하기 위해 body 태그 안에 script 태그를 사용했습니다. script 태그 내에서 getElementById() 함수를 사용하여 id를 사용하여 요소를 가져오고 setAttribute() 함수를 사용하여 해당 클래스를 test1에서 test2로 변경했습니다.
위 출력에서 텍스트의 색상과 글꼴 크기가 변경된 것을 볼 수 있습니다.
test1 및 test2 스타일은 서로 다른 색상과 글꼴 크기를 포함합니다. 위의 코드 내에서 파란색을 포함하는 h1 태그에 클래스 이름 test1을 부여했지만 script 태그 내에서 class 속성을 test2로 변경했습니다. 출력은 빨간색입니다.
위의 코드에서 class 속성을 변경했지만 요소의 id 또는 name 속성과 같은 다른 속성도 변경할 수 있습니다. getAttribute() 함수를 사용하여 요소의 속성을 가져올 수 있고 removeAttribute() 함수를 사용하여 요소의 기존 속성을 제거할 수 있습니다.
