티스토리 뷰

프로그래밍/JavaScript

문자열의 width 구하기

메모하는습관 2011.07.29 18:21
메시지 박스 같은 것을 만들다 보면 문자열의 길이가 일정하지 않다.
보통의 html tag들은 height는 내용에 따라 늘어나지만 width는 대부분 그렇지 않다.
그래서 문자열의 width를 구하는 방법을 생각해보던 중 그럴싸한 트릭을 생각해냈다.

우선 간단하게 설명을 하면
span tag는 문자열 만큼 width가 늘어나므로 span tag를 이용하여 문자열의 width를 구하면 된다.

1. span 을 position: absolute로 잡는다.
2. span 의 좌표를 화면에 보이지 않는 좌표로 잡는다 (예를 들면 top: -10000 또는 left: -10000)
3. 폰트와 같이 width에 영향을 미치는 style들도 감안한다.
4. span 에 문자열을 넣는다.
5. span 의 outerWidth 값을 받는다.


아래는 문자열의 width를 구하는 예제 이다.


아래는 위 sample의 코드 이다.





댓글
댓글쓰기 폼
«   2018/12   »
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31          
Total
337,223
Today
61
Yesterday
120
글 보관함