document.evaluate

用 Javascript 获取指定页面元素的位置 - top, left, document, Element, 元素, position, 位置

marz posted @ Aug 11, 2010 07:09:58 AM in javascript with tags javascript js fix cheats tricks technique elements position justify , 4322 readers

 

用 Javascript 获取指定页面元素的位置是一个非常常见的需求，本文介绍的方法能够准确返回一个元素相对于整个文档左上角的坐标，即元素的 top 、left 的位置，而且能够兼容浏览器，相信对新手非常有用。

 

 

--------------------------------------------------------------

点此浏览示例文件

--------------------------------------------------------------

 

 

Javascript:

 

  1.  
  2. <script language="JavaScript" type="text/javascript">
  3. <!--
  1.  
  1. // 说明：用 Javascript 获取指定页面元素的位置
  2. // 整理：http://www.codebit.cn
  3. // 来源：YUI DOM
  1.  
  1. function getElementPos(elementId) {
  1.  
  1. var ua = navigator.userAgent.toLowerCase();
  2. var isOpera = (ua.indexOf('opera') != -1);
  3. var isIE = (ua.indexOf('msie') != -1 && !isOpera); // not opera spoof
  1.  
  1. var el = document.getElementById(elementId);
  1.  
  1. if(el.parentNode === null || el.style.display == 'none') 
  1. {
  1. return false;
  1. }
  1.  
  1. var parent = null;
  2. var pos = [];
  1. var box;
  1.  
  1. if(el.getBoundingClientRect)    //IE
  1. {
  1. box = el.getBoundingClientRect();
  1. var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
  2. var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
  1.  
  1. return {x:box.left + scrollLeft, y:box.top + scrollTop};
  1. }
  1. else if(document.getBoxObjectFor)    // gecko
  1. {
  1. box = document.getBoxObjectFor(el);
  1. var borderLeft = (el.style.borderLeftWidth)?parseInt(el.style.borderLeftWidth):0;
  1. var borderTop = (el.style.borderTopWidth)?parseInt(el.style.borderTopWidth):0;
  1.  
  1. pos = [box.x - borderLeft, box.y - borderTop];
  1. }
  1. else    // safari & opera
  1. {
  1. pos = [el.offsetLeft, el.offsetTop];
  1. parent = el.offsetParent;
  1. if (parent != el) {
  2. while (parent) {
  1. pos[0] += parent.offsetLeft;
  2. pos[1] += parent.offsetTop;
  3. parent = parent.offsetParent;
  1. }
  1. }
  1. if (ua.indexOf('opera') != -1 
  1. || ( ua.indexOf('safari') != -1 && el.style.position == 'absolute' )) 
  1. {
  1. pos[0] -= document.body.offsetLeft;
  1. pos[1] -= document.body.offsetTop;
  1. } 
  2. }
  1. if (el.parentNode) { parent = el.parentNode; }
  1. else { parent = null; }
  1. while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML') 
  1. { // account for any scrolled ancestors
  1. pos[0] -= parent.scrollLeft;
  1. pos[1] -= parent.scrollTop;
  1. if (parent.parentNode) { parent = parent.parentNode; } 
  1. else { parent = null; }
  1. }
  1. return {x:pos[0], y:pos[1]};
  1. }
  1.  
  1. //-->
  1. </script>
  1.  

 

从 <http://www.codebit.cn/pub/html/javascript/tip/get_element_position/> 插入

Small_feed Comments (15)
1
[Reply]
yes bank customer id said:
Oct 03, 2022 01:52:40 PM

The Yes Bank Customer ID is printed on Account Statement, Bank Passbook, Cheque Book and on the Welcome Kit. Find out how to do YES Bank Balance Enquiry by Number. Do YES Balance Check by toll free no, Missed Call, Passbook,ATM,Netbanking. How to Find Yes Bank Customer ID? · First of all open Yes Bank application on your mobile.The Yes Bank Customer ID is printed on Account Statement, Bank Passbook, yes bank customer id number Cheque Book and on the Welcome Kit. Find out how to do YES Bank Balance Enquiry by Number. Do YES Balance Check by toll free no.The Yes Bank Customer ID is printed on Account Statement, Bank Passbook, Cheque Book and on the Welcome Kit. Find out how to do YES Bank Balance Enquiry by Number. Do YES Balance Check by toll free no

2
[Reply]
meidir said:
Feb 08, 2023 09:55:37 PM

Very nice post. I just stumbled upon your weblog and wanted to say that I have really enjoyed surfing around your blog posts. After all I will be subscribing to your rss feed and I hope you write again soon! SaaS Law Firm

3
[Reply]
baños publicos cerca said:
Jul 28, 2023 11:43:09 PM

Cuando viajamos, necesitamos encontrar baños, baños o baños públicos en la ubicación actual. El uso de Google Maps, Google Assistant, Alexa, iPhone Siri y otros servicios de búsqueda de ubicación lo ayudan a obtener fácilmente los baños y baños públicos más cercanos. baños publicos cerca de mi ubicacion Aquí hemos discutido varios servicios de búsqueda de ubicación que lo ayudan a encontrar los baños públicos más cercanos a su ubicación actual donde se encuentra.

4
[Reply]
APSCERT 7th Model P said:
Jul 29, 2023 07:48:04 PM

BSEAP Board Students can Download Their Subject wise PDF Files it will be Beneficial for Study Material Practice and Regular Check Bit Bank and Question Bank, Important Questions, Students who are Attending AP 7th Class Annual Exam can make APSCERT 7th Model Paper 2024 use of this Information which we have Provided here.This Website Available AP Class Last year Exam Question Paper for Students can make a better Performance in Exam 2024.Good News AP Students who are Searching for the AP 7th Class Model Paper 2024 BSEAP Board has been Uploaded the All Subject Wise Download to the Students who are Going to Appear in the Board Examination this year.

5
[Reply]
seo said:
Sep 09, 2023 07:35:14 PM

Took me time to read all the comments, but I really enjoyed the article. It proved to be Very helpful to me and I am sure to all the commenters here! It’s always nice when you can not only be informed, but also entertained! get titktok views

6
[Reply]
seo said:
Sep 09, 2023 10:06:29 PM

Took me time to read all the comments, but I really enjoyed the article. It proved to be Very helpful to me and I am sure to all the commenters here! It’s always nice when you can not only be informed, but also entertained! hard toothbrush

7
[Reply]
seo said:
Sep 10, 2023 12:16:33 PM I really like your writing style, great information, thankyou for posting. kerassentials
8
[Reply]
sophia said:
Oct 31, 2023 04:46:59 PM

I haven’t any word to appreciate this post.....Really i am impressed from this post....the person who create this post it was a great human..thanks for shared this with us. UFABET เว็บพนันออนไลน์เว็บตรง

9
[Reply]
sophia said:
Oct 31, 2023 06:57:06 PM

I haven’t any word to appreciate this post.....Really i am impressed from this post....the person who create this post it was a great human..thanks for shared this with us. ufabet เว็บตรง ไม่มีขั้นต่ำ

10
[Reply]
sophia said:
Oct 31, 2023 10:00:23 PM

Great Information sharing .. I am very happy to read this article .. thanks for giving us go through info.Fantastic nice. I appreciate this post. ยูฟ่าเบท เว็บพนันออนไลน์

11
[Reply]
sophia said:
Nov 01, 2023 12:46:24 AM

Great Information sharing .. I am very happy to read this article .. thanks for giving us go through info.Fantastic nice. I appreciate this post. เว็บแทงบอลขั้นต่ำ 10บาท

12
[Reply]
sophia said:
Nov 01, 2023 01:03:53 PM

I appreciate everything you have added to my knowledge base.Admiring the time and effort you put into your blog and detailed information you offer.Thanks. Staffing Agency

13
[Reply]
sophia said:
Nov 02, 2023 02:02:34 AM

Nice post! This is a very nice blog that I will definitively come back to more times this year! Thanks for informative post. How to Bend Steel Rebar

14
[Reply]
Robinjack said:
Nov 02, 2023 06:18:09 PM

This post has some really wonderful insights and interpretations in it. Another great update. ufabet เว็บตรง สมัคร

15
[Reply]
sophia said:
Nov 02, 2023 08:13:54 PM

Nice post! This is a very nice blog that I will definitively come back to more times this year! Thanks for informative post. สมัครเว็บ พนันออนไลน์


Login *


loading captcha image...
(type the code from the image)
or Ctrl+Enter