JavaScript에서 left 속성을 사용하면 버튼처럼 위치가 지정된(positioned) 요소의 왼쪽 위치를 자유롭게 설정할 수 있습니다.
단, left 속성이 정상적으로 작동하려면 해당 요소에 position 값(absolute, relative, fixed 등)이 먼저 지정되어 있어야 한다는 점을 기억하세요.
예제 코드
아래 예제는 버튼을 클릭하면 JavaScript로 해당 버튼의 왼쪽 위치를 변경하는 코드입니다. 직접 실행해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
#myID {
position: absolute;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<p>This is Demo Text.</p>
<button type="button" id="myID" onclick="display()">Change Left Position</button>
<script>
function display() {
document.getElementById("myID").style.left = "150px";
}
</script>
</body>
</html>코드 설명
위 코드의 핵심 부분은 다음과 같습니다.
- CSS 스타일:
#myID선택자에position: absolute;를 지정하여 요소가 위치 이동이 가능한 상태가 되도록 설정합니다. - 버튼 클릭 이벤트:
onclick="display()"속성으로 버튼을 클릭하면display()함수가 호출됩니다. - 위치 변경 로직:
document.getElementById("myID").style.left = "150px";구문이 실행되면서 버튼의 왼쪽 위치가 화면 기준 150px 지점으로 이동합니다.
이처럼 element.style.left 속성에 원하는 픽셀(px), 퍼센트(%) 등의 값을 문자열 형태로 할당하면, 브라우저 화면에서 즉시 요소의 위치가 변경됩니다.