°³Ã¼ÀÇ ÁÖÀ§¿¡ °¨½Î´Â ¹Ù´Ú »ç°¢Çü ÁÂÇ¥(Á¦ÀÏ À§¿¡¼­ ºÎÅÍÀÇ °Å¸®)¸¦ Çȼ¿´ÜÀ§·Î ¹ÝȯÇϰųª ÁöÁ¤ÇÑ´Ù.

Àμö
: (¼Ó¼º Á¤¼ö°ª)
¼Ó¼º°ªÀº °³Ã¼ »ç°¢Çü ¹Ù´ÚÀÇ ¸Ç À§¿¡¼­ ºÎÅÍÀÇ °Å¸®¸¦ Çȼ¿´ÜÀ§·Î ³ªÅ¸³»´Â Á¤¼ö°ªÀÌ´Ù.

ÀÌ ¼Ó¼ºÀº Àбâ/¾²±âÀÌ¸ç µðÆúÆ®°ªÀº ¾ø´Ù.

Ư±â

TextRange °³Ã¼ »ç°¢ÇüÀÇ ¾Æ·¡ÂÊ ÁÂÇ¥¸¦ ¾òÀ¸·Á¸é TextRangesÀ» »ç¿ëÇÏ¿©

RctCol=TextRangeObj.getClientRects();
RctCol[index].bottom;

¹­ÀÎ(bound) ¿¤·¹¸àÆ®ÀÇ ¹ÝÇ⠻簢ÇüÀÇ ¾Æ·¡ÂÊ ÁÂÇ¥¸¦ ¾òÀ¸·Á¸é boundElementsÀ» »ç¿ëÇÏ¿©

BndRctCo=elementObj.getBoundingClientRect();
BndRctCol(index).bottom;

µÎ °æ¿ì ¸ðµÎ Ä÷º¼Ç¿¡¼­ ¹è¿­º¯¼öÀÇ Àμö·Î È£ÃâÇϹǷΠóÀ½ °ÍÀÌ index 0, µÎ¹ø°°¡ 1 ½ÄÀ¸·Î µÈ´Ù.

Àû¿ë
°³Ã¼scriptHTML±Ô°ÝIE
Âü°í
bottom left right top TextRectangle TextRectangles Ä÷º¼Ç

ÀÌ ¼Ó¼ºÀº CSS Level 2(Cascading Style Sheets)¿¡¼­ Á¤ÀǵǾú´Ù.


Å©¸¯ÇØ º¸¶ó.

 
<SCRIPT>
function getPos(obj) {
  rectObj=obj.getBoundingClientRect();
  str='Bounding rectangle<BR>¿ÞÂÊ ¸ÇÀ§ ÁÂÇ¥ ('+rectObj.left+', '+rectObj.top+')<BR>';
  str+='¹Ù´Ú ¿À¸¥ÂÊ ÁÂÇ¥ ('+rectObj.right+', <FONT color=red>'+rectObj.bottom+'</FONT>)';
  show.innerHTML=str;
}
</SCRIPT>
<P onclick="getPos(this)" style="border:solid 1 green;text-align:center;background:#ffa">Å©¸¯ÇØ º¸¶ó.</P>
<DIV id=show> </DIV>