JavaScript에서 텍스트의 단어 사이 간격을 조절하려면 wordSpacing 속성을 사용하면 됩니다. 이 속성은 CSS의 word-spacing 스타일에 대응하며, 픽셀(px), 포인트(pt), em 등 다양한 단위로 간격을 지정할 수 있습니다.
예제
아래 코드를 실행하면 버튼을 클릭했을 때 문단의 단어 간격이 25px로 변경되는 것을 확인할 수 있습니다. wordSpacing 속성을 구현하는 방법은 다음과 같습니다.
<!DOCTYPE html>
<html>
<body>
<p id = "pid">This is an example paragraph.</p>
<button type = "button" id="btn" onclick = "display()">Set Space</button>
<script>
function display() {
document.getElementById("pid").style.wordSpacing = "25px";
}
</script>
</body>
</html>코드 설명
버튼을 클릭하면 display() 함수가 호출되고, getElementById()로 id가 "pid"인 문단 요소를 가져온 뒤 style 객체의 wordSpacing 값을 "25px"로 설정합니다. 그 결과 문단 내 단어들 사이의 간격이 25픽셀만큼 넓어집니다.
기본 간격으로 되돌리려면 값을 "normal"로 설정하면 되며, 음수 값(예: "-5px")을 사용하면 단어 간격을 좁힐 수도 있습니다.