Javascript를 사용하여 페이지 요소_javascript 기술의 특정 위치를 가져옵니다.

웹페이지를 만드는 과정에서 웹페이지에 있는 요소의 정확한 위치를 알아야 할 때가 있습니다.

다음 튜토리얼은 웹 페이지 포지셔닝과 관련된 Javascript 관련 지식을 요약합니다.

1. 웹페이지 크기와 브라우저 창 크기

먼저 두 가지 기본 개념을 명확히 해야 합니다.

웹페이지의 전체 영역은 크기입니다. 일반적으로 웹페이지의 크기는 콘텐츠와 CSS 스타일 시트에 따라 결정됩니다.

브라우저 창의 크기는 브라우저 창에 표시되는 웹페이지의 영역을 말하며 뷰포트라고도 합니다.

분명히 웹페이지의 내용이 브라우저 창에 완전히 표시될 수 있다면(즉, 스크롤 막대가 나타나지 않으면) 웹페이지의 크기와 브라우저 창의 크기는 동일합니다. 전체 페이지를 표시할 수 없는 경우 브라우저 창을 스크롤하여 웹 페이지의 일부를 표시하십시오.

2. 웹페이지 크기를 가져옵니다.

웹페이지의 모든 요소에는 clientHeight 및 clientWidth 속성이 있습니다. 이 두 속성은 테두리와 스크롤 막대가 차지하는 공간을 제외하고 요소의 콘텐츠 부분과 패딩이 차지하는 시각적 영역을 나타냅니다.

(그림 1 clientHeight 및 clientWidth 속성)

따라서 문서 요소의 clientHeight 및 clientWidth 속성은 웹 페이지의 크기를 나타냅니다.

코드 복사 코드는 다음과 같습니다.

function getViewport(){
if (document.compatmode == "backcompat") {
Return {
Width: Document.body.clientWidth,
Height: Document.Clientheigh
} Else { N> Return { Width: document.documentedLement.clientWidth,
높이: Document.documentedlement.clientheight
}
}


위의 GetView 함수는 브라우저에 창의 높이와 너비를 반환할 수 있습니다. . 사용할 때 주의해야 할 세 가지 사항이 있습니다.

1) 이 함수는 페이지가 로드된 후에 실행되어야 합니다. 그렇지 않으면 문서 개체가 생성되지 않고 브라우저에서 오류를 보고합니다.

2) 대부분의 경우 document.documentElement.clientWidth는 올바른 값을 반환합니다. 그러나 IE6의 quirks 모드에서는 document.body.clientWidth가 올바른 값을 반환하므로 문서 모드에 대한 판단이 함수에 추가됩니다.

3) clientWidth 및 clientHeight는 모두 읽기 전용 속성이므로 값을 할당할 수 없습니다.

3. 웹 페이지의 크기를 가져오는 또 다른 방법


웹 페이지의 각 요소에는 ​​페이지의 시각적 영역을 참조하는 scrollHeight 및 scrollWidth 속성도 있습니다. 스크롤 막대를 포함한 요소입니다. 그러면 문서 개체의 scrollHeight 및 scrollWidth 속성은 웹 페이지의 크기, 즉 스크롤 막대의 전체 길이와 너비를 의미합니다.

getViewport() 함수를 모방하여 getPagearea() 함수를 작성할 수 있습니다.




코드 복사

코드는 다음과 같습니다. 함수 getPagearea(){ if (document.compatmode == "backcompat") {

반환 {

너비: Document.body.scrollwidth,
높이: Document.body.ighheighheighry { 반환 {
　　　　width: document.documentElement .scrollWidth,
　　　　　Height: document.documentElement.scrollHeight
　　　}
　　　}
　}


그러나 이 기능에는 문제가 있습니다. 웹 페이지의 콘텐츠가 스크롤 막대 없이 브라우저 창에 완전히 표시될 수 있는 경우 웹 페이지의 clientWidth 및 scrollWidth가 동일해야 합니다. 그러나 실제로 브라우저마다 처리 방법이 다르며 이 두 값이 반드시 동일하지는 않습니다. 따라서 그 중 더 큰 값을 취해야 하므로 getPagearea() 함수를 다시 작성해야 합니다.




코드 복사

코드는 다음과 같습니다.

　　function getPagearea(){
　　　　if (document.compatMode == "BackCompat"){
　　　　　　return {
　　　　　　　　width: Math. max(document.body.scrollWidth,
　　　　　　　　　　　　　　　　document .body.clientWidth),
　　　　　　　　height: Math.max(document.body.scrollHeight,
　　　　　　　　　　　　　　document.body.clientHeight )
　　　　　　}
　　　　} else {
　　　　　　return {
　　　　　　　　너비: Math.max(document.documentElement.scrollWidth,
　　　　　　　　　　　　　　　document.document.clientWidth),
　　　　　　　　height : Math.max(document.documentElement.scrollHeight,
　　　　　　　　　　　　　　　　document.documentElement.clientHeight)
　　　　　　}
　　　　}
　　}

四、获取网页元素的绝对位置

网页元素的绝对位置，指该元素的左上角对于整张网页左上角的坐标。这个绝对位置要通过计算才能得到。

素的左上角与父容器(offsetParent对象)左上角的
하면两个函数可以获取绝对位置的横坐标和纵坐标.

复代码 代码如下: 　　function getElementLeft(element){

　　　　var ActualLeft = element.offsetLeft;

　　　　var current = element.offsetParent;

　　　　while (current !== null){
　　　　　　actualLeft = current.offsetLeft;
　　　　　　current = current.offsetParent;
　　　　}

　　　　실제 반환Left;
　　}

　　function getElementTop(element){
　　　　var ActualTop = element.offsetTop;
　　　　var current = element.offsetParent;

　　　　while (current !== null){
　　　　　　actualTop = current.offsetTop;
　　　　　　current = current.offsetParent;
　　　　}

　　　　return realTop;
　　}


由于는 ​​表格와 iframe中,offsetParent对象未必等于父容器,所以上等函数对于表格와iframe중의 Component素은 사용되지 않습니다.

五、获取网页元素的于对位置

网页页素的指位置，指该素左上角于浏览器窗于浏览器窗于左上角的坐标. 🎜>有了绝对位置以后，获得佮对位置就很容易了, 只要将绝对坐标减去页面的滚动条滚动的距离就可以了.滚动条滚动的垂直보기属性.

 
（图三 scrollTop 및 scrollLeft属性）

对上一节中的两个函数进行应的改写：



复제대码

代码如下: 　　function getElementViewLeft(element){ 　　　　var ActualLeft = element.offsetLeft;

　　　　var current = element.offsetParent;

　　　　while (current !== null){
　　　　　　actualLeft = current.offsetLeft;
　　　　　　current = current.offsetParent;
　　　　}

　　　　if (document.compatMode == "BackCompat"){
　　　　　　var elementScrollLeft=document.body.scrollLeft;
　　　　} else {
　　　　　　var elementScrollLeft=document.documentElement.scrollLeft;
　　　　}

　　　　실제Left-elementScrollLeft를 반환합니다.
　　}

　　function getElementViewTop(element){
　　　　var ActualTop = element.offsetTop;
　　　　var current = element.offsetParent;

　　　　while (현재 !== null){
　　　　　　actualTop = 현재. 오프셋상단;
　　　　　　current = current.offsetParent;
　　　　}

　　　　 if (document.compatMode == "BackCompat"){
　　　　　　var elementScrollTop=document.body.scrollTop;
　　　　} else {
　　　　　　var elementScrollTop=document.documentElement.scrollTop;
　　　　}

　　　　실제Top-elementScrollTop을 반환합니다.
　　}


scrollTop 属性とscrollLeft 属性には値を割り当てることができ、Web ページを対応する位置に即座に自動的にスクロールするため、Web ページ要素の相対位置を変更するために使用できます。さらに、element.scrollIntoView() メソッドにも同様の効果があり、Web ページ要素をブラウザ ウィンドウの左上隅に表示できます。

6. 要素の位置を取得する簡単な方法

上記の関数に加えて、Web ページの位置を取得する簡単な方法があります。要素をすぐに削除します。

それは、getBoundingClientRect() メソッドを使用することです。これは、left、right、top、bottom の 4 つの属性を含むオブジェクトを返します。これらの属性は、ブラウザ ウィンドウ (ビューポート) の左上隅を基準とした要素の左上隅と右下隅の間の距離にそれぞれ対応します。 。

したがって、Web ページ要素の相対位置は

コードをコピーします コードは次のとおりです:

var

コードをコピー

コードは次のとおりです: var X= this.getBoundingClientRect().left document.documentElement.scrollLeft;

var Y =this.getBoundingClientRect().top document.documentElement.scrollTop; 現在、IE 、Firefox 3.0、および Opera 9.5 はすべてこの方法をサポートしていますが、Firefox 2.x、Safari、Chrome、および Konqueror はサポートされていません。