JavaScript에서는 columnWidth 스타일 속성을 사용하여 다단(multi-column) 레이아웃의 열 너비를 읽어오거나 설정할 수 있습니다. 이 속성은 CSS의 column-width 속성에 대응하며, 버튼 클릭 같은 사용자 이벤트에 따라 열 너비를 동적으로 변경할 때 유용합니다.
기본 문법
object.style.columnWidth = "auto | length | initial | inherit";
- auto: 기본값으로, 브라우저가 열 너비를 자동으로 계산합니다.
- length: px, em 등의 단위로 직접 너비를 지정합니다. 예를 들어 "70px"처럼 설정할 수 있습니다.
예제
다음 코드를 실행한 후 "너비 변경" 버튼을 클릭하면, JavaScript를 통해 해당 요소의 열 너비가 70px로 변경됩니다.
<!DOCTYPE html>
<html>
<body>
<p>열의 너비를 설정합니다</p>
<button onclick="display()">너비 변경</button>
<div id="myID">
데모 텍스트입니다. 데모 텍스트입니다. 데모 텍스트입니다.
데모 텍스트입니다. 데모 텍스트입니다. 데모 텍스트입니다.
데모 텍스트입니다. 데모 텍스트입니다. 데모 텍스트입니다.
데모 텍스트입니다. 데모 텍스트입니다. 데모 텍스트입니다.
데모 텍스트입니다. 데모 텍스트입니다. 데모 텍스트입니다.
</div>
<script>
function display() {
document.getElementById("myID").style.columnWidth = "70px";
}
</script>
</body>
</html>위 예제에서 핵심은 다음 한 줄입니다.
document.getElementById("myID").style.columnWidth = "70px";getElementById()로 대상 요소를 선택한 뒤, style.columnWidth에 원하는 값을 할당하면 즉시 열 너비가 적용됩니다. 참고로 현재 설정된 값을 확인하려면 element.style.columnWidth를 그대로 읽으면 되지만, 인라인 스타일이 아닌 경우에는 getComputedStyle()을 사용하는 것이 정확합니다.