엘레멘트의 한줄 텍스트나 TextRange 개체에 포함된 사각형을 참조한다.

Script [propVal=]..propName;
HTML 없다.
특기

엘레멘트나 TextRange 개체에 getClientRects 메서드를 적용하여 TextRectangle 개체들의 TextRectangles 컬렉션을 반환받는다. getClientRects 메서드는 클라이언트에 상대적인 각각 왼쪽, 위쪽, 오른쪽, 아래쪽 좌표를 갖는 사각형들의 컬렉션을 반환한다.

참조

이 개체는 (영문)HTML3.2에서 정의되었다.

IE5 부터는 스크립트를 사용할 수 있다.


설명을 위한 예제

엘레멘트나 TextRange 개체에 getClientRects 메서드를 적용하여
TextRectangle 개체들의 TextRectangles 컬렉션을 반환받는다.
getClientRects 메서드는 클라이언트에 상대적인
각각 왼쪽, 위쪽, 오른쪽, 아래쪽 좌표를 갖는
사각형들의 컬렉션을 반환한다.


<P>엘레멘트나 TextRange 개체에 getClientRects 메서드를 적용하여<BR>
TextRectangle 개체들의 <B id=bObj style="border:dotted 1 blue;background-color:fee">TextRectangles 컬렉션을 반환받는다.<BR>
getClientRects 메서드는 클라이언트에 상대적인<BR>
각각 왼쪽, 위쪽, 오른쪽, 아래쪽 좌표를 갖는<BR>
사각형들의 컬렉션을</B> 반환한다.</P>

이 getClientRects 메서드로 속성 보는 예제는 b 엘레멘트에 네개의 TextRectangle을 갖는 TextRectangles 컬렉션을 반환하며 네개의 TextRectangle 개체들은 다음과 같다.

  1. "TextRectangles 컬렉션을 반환받는다."
  2. "getClientRects 메서드는 클라이언트에 상대적인"
  3. "각각 왼쪽, 위쪽, 오른쪽, 아래쪽 좌표를 갖는"
  4. "사각형들의 컬렉션을"

결과 표시창

이 텍스트가 포함되어 있는 윈도우의 크기가 조절되면 TextRectangle 개체들은 업데이트되지 않는다. 이 개체들은 한 싯점에 포착한 것으로 업데이트하려면 onresize 이벤트가 발생되면 업데이트해야 한다.

TextRectangle의 너비는 그 개체를 포함하고 있는 용기의 너비와 일치하지 않는다. TextRange는 텍스트 너비와 같은 반면 TextRectangle의 너비는 켁스트를 포함하는 엘레멘트의 너비와 같다.

<SCRIPT>
var oObj='';
function showRects(obj){
  cRects=obj.getClientRects();
  oObj=cRects[0];
  colLn=cRects.length;
  str='';
  for (i=0;i< colLn;i++){	
    str+=(i+1)+'번 TextRectangle<UL>';
    str+='<LI>cRects('+i+').top='+cRects(i).top+' pixel.';
    str+='<LI>cRects('+i+').bottom='+cRects(i).bottom+' pixel.';
    str+='<LI>높이 (cRects('+i+').bottom-cRects('+i+').top)='+(cRects(i).bottom-cRects(i).top)+' pixel.';
    str+='<LI>cRects('+i+').right='+cRects(i).right+' pixel.';
    str+='<LI>cRects('+i+').left='+cRects(i).left+' pixel.';
    str+='<LI>너비 (cRects('+i+').right-cRects('+i+').left)='+(cRects(i).right-cRects(i).left)+' pixel.</UL>';
  }
  showA.innerHTML=str;
  showbottom.innerText=oObj.bottom;
  showleft.innerText=oObj.left;
  showright.innerText=oObj.right;
  showtop.innerText=oObj.top;
}
</SCRIPT>
<BUTTON onclick=showRects(bObj)>TextRectangles 보기 클릭</BUTTON>
<DIV id=showA style=width:500>결과 표시창</DIV>

bottom 속성 IE
⇒ 개체의 내용 주의의 사각형 바닥 좌표를 픽셀단위로 반환하거나 설정한다.
문법: .bottom[=iVal]
코드: document.write(oObj.bottom); 결과: 위 예제를 클릭하여 TextRectangle을 생성하고 결과를 보라.
left 속성 IE
⇒ 개체의 내용 주의의 사각형 왼쪽 좌표를 픽셀단위로 반환하거나 설정한다.
문법: .left[=iVal]
코드: document.write(oObj.left); 결과: 위 예제를 클릭하여 TextRectangle을 생성하고 결과를 보라.
right 속성 IE
⇒ 개체의 내용 주의의 사각형 오른쪽 좌표를 픽셀단위로 반환하거나 설정한다.
문법: .right[=iVal]
코드: document.write(oObj.right); 결과: 위 예제를 클릭하여 TextRectangle을 생성하고 결과를 보라.
top 속성 IE
⇒ 개체의 내용 주의의 사각형 위쪽 좌표를 픽셀단위로 반환하거나 설정한다.
문법: .top[=iVal]
코드: document.write(oObj.top); 결과: 위 예제를 클릭하여 TextRectangle을 생성하고 결과를 보라.

개체 예제

여기가 큰 TextRectangle 사각형이다.
이 블럭에서 마우스를 클릭할 때마다 각 줄이 강조된다.
전부 강조된 후에는 처음부터 반복된다.
결과 표시창

getClientRects과 getBoundingClientRect 메서드로 개체를 만들고 각 줄에 강조 색상을 표시하였다.
붉은 테두리 속을 반복해서 클릭해 보라. (갈색은 계산된 수치임)

<SCRIPT>
var txrgColl;
var idx=0;
function Highlight(obj){
  bodyObj=document.body;
  txrgColl=obj.getClientRects();
  if (idx==txrgColl.length) idx=0;
  str='line #'+idx+'<BR>';
  cdObj=txrgColl[idx];
  bnObj=obj.getBoundingClientRect();

  div1Obj.style.top=bodyObj.scrollTop+cdObj.top-cdObj.bottom+cdObj.top;
  div1Obj.style.left=bnObj.left;
  div1Obj.style.right=cdObj.right;
  div1Obj.style.width=cdObj.right-cdObj.left;
  div1Obj.style.height=cdObj.bottom-cdObj.top;

  div2Obj.style.top=bodyObj.scrollTop+bnObj.top;
  div2Obj.style.left=bnObj.left;
  div2Obj.style.right=bnObj.right;
  div2Obj.style.width=bnObj.right-bnObj.left;
  div2Obj.style.height=bnObj.bottom-bnObj.top;

  str+='div1Obj,style.top='+cdObj.top+' .bottom='+cdObj.bottom+' .left='+cdObj.left+' .right='+cdObj.right;
  str+=' <FONT color=brown>width='+(cdObj.right-cdObj.left)+' height='+(cdObj.bottom-cdObj.top)+'</FONT><BR>';

  str+='div2Obj,style.top='+bnObj.top+' .bottom='+bnObj.bottom+' .left='+bnObj.left+' .right='+bnObj.right;
  str+=' <FONT color=brown>width='+(bnObj.right-bnObj.left)+' height='+(bnObj.bottom-bnObj.top)+'</FONT><BR>';

  str+='bodyObj.scrollTop='+bodyObj.scrollTop+' <FONT color=brown>bottom='+(bodyObj.scrollTop+bodyObj.scrollHeight)+'</FONT> ';
  str+='.scrollLeft='+bodyObj.scrollLeft+' <FONT color=brown>right='+(bodyObj.scrollLeft+bodyObj.scrollWidth);
  str+='</FONT> .scrollWidth='+bodyObj.scrollWidth+' .scrollHeight='+bodyObj.scrollHeight+'<BR>';
  showB.innerHTML=str;
  idx++;
}
</SCRIPT>
<DIV onclick="Highlight(this)" style="border:solid 2 red;line-height:2em;cursor:hand">
여기가 큰 TextRectangle 사각형이다.<BR>
이 블럭에서 마우스를 클릭할 때마다 각 줄이 강조된다.<BR>
전부 강조된 후에는 처음부터 반복된다.
</DIV>
<DIV id="div1Obj" style="position:absolute;left:15;top:0;z-index:-1`;background-color:yellow"></DIV>
<DIV id="div2Obj" style="position:absolute;left:15;top:0;z-index:-2;background-color:aqua"></DIV>
<DIV id=showB style="border:solid 1 blue;padding:5;height:5.5em">결과 표시창</DIV>