[JavaScript] 문자열 길이를 픽셀로 가져오기 (get text length in pixel)

보이지 않는 <span>을 하나 만들어서 innerText에 문자열을 할당하고 <span>의 offsetWidth를 통해 문자열의 길이를 픽셀로 가져오는 방법.

가변길이 문자열을 이용해 동적인 UI를 구성하는데 쓸만함.

function getTextLengthInPixel(txt, optFont)
{
    var myId = 'my_span_ruler';
  
    var ruler = document.getElementById(myId);
  
    if (!ruler) {
        ruler = document.createElement('span');
        ruler.id = myId;
        // 안보이게
        ruler.setAttribute('style', 'visibility:hidden; white-space:nowrap; position:absolute; left:-9999px; top: -9999px;');
        document.body.appendChild(ruler);
    }
  
    // 폰트 스타일
    ruler.style.font = (!optFont) ? document.body.style.font : optFont;
  
    ruler.innerText = txt;
  
    return ruler.offsetWidth;
}
  
// body의 기본 폰트스타일
var len = getTextLengthPixel('MY TEXT');
// 여러가지 폰트스타일 지정가능
len = getTextLengthPixel('MY TEXT', '24px arial');
len = getTextLengthPixel('MY TEXT', 'bold 24px verdana');