웹 개발을 하다 보면 이미지의 크기, 링크의 주소, 입력 필드의 값 등 HTML 요소의 속성(attribute) 값을 동적으로 변경해야 하는 경우가 자주 발생합니다. 자바스크립트를 사용하면 이러한 속성 값을 손쉽게 수정할 수 있습니다.
속성 값을 변경하는 두 가지 방법
1. DOM 속성에 직접 접근하기
가장 간단한 방법은 document.getElementById()로 요소를 선택한 뒤, 해당 속성에 새 값을 직접 할당하는 것입니다.
<!DOCTYPE html>
<html>
<body>
<img id="HTML5" src="https://www.tutorialspoint.com/html5/images/html5-mini-logo.jpg" width="200" height="150">
<script>
// width 속성 값을 200에서 250으로 변경
document.getElementById("HTML5").width = "250";
</script>
<p>이미지 너비가 업데이트되었습니다.</p>
</body>
</html>위 코드는 id가 HTML5인 이미지 요소를 찾아 width 속성을 200px에서 250px로 변경합니다. 페이지가 로드되면 스크립트가 즉시 실행되어 이미지 크기가 조정됩니다.
2. setAttribute() 메서드 사용하기
모든 속성에 범용적으로 적용할 수 있는 방법으로는 setAttribute() 메서드가 있습니다. 첫 번째 인수에는 속성 이름, 두 번째 인수에는 변경할 값을 전달합니다.
const img = document.getElementById("HTML5");
img.setAttribute("width", "300");
img.setAttribute("height", "200");두 방식의 차이점
- 직접 접근 방식: 코드가 간결하고 성능이 좋지만, 표준 DOM 속성으로 매핑된 속성만 사용할 수 있습니다.
- setAttribute() 방식: data-* 속성을 포함한 모든 HTML 속성에 사용할 수 있어 더 유연합니다.
상황에 맞는 방법을 선택하여 웹 페이지의 요소를 자유롭게 제어해 보세요.