原生JS获取坐标

福尔摩斯对我笑 2019-06-15 85272 次 12349条

JS获取元素的offsetTop,offsetLeft等属性

obj.clientWidth //获取元素的宽度(width+padding)
obj.clientHeight //元素的高度
obj.offsetLeft //元素相对于父元素的left
obj.offsetTop //元素相对于父元素的top
obj.offsetWidth //元素的宽度(width+padding+border)
obj.offsetHeight //元素的高度

获取元素的纵坐标(相对于窗口)

// 获取元素的纵坐标(相对于窗口)
function getTop(e) {
  var offset = e.offsetTop
  if (e.offsetParent != null) offset += getTop(e.offsetParent)
  return offset
}

获取元素的横坐标(相对于窗口)

function getLeft(e) {
  var offset = e.offsetLeft
  if (e.offsetParent != null) offset += getLeft(e.offsetParent)
  return offset
}

上面的方法无疑影响性能,好在浏览器给我提供了相应的接口getBoundingClientRect,这个方法最早出现在IE浏览器中,后来的浏览器也跟着支持了这个方法,而且还更加完善,IE中只能获取到元素的left,top,bottom,right的属性,而后面的现代浏览器还能获取到元素的width和height.

var box = document.getElementById("box");
var pos = box.getBoundingClientRect();
box.innerHTML = "top:"+pos.top +
  "left:"+pos.left +
  "bottom:"+pos.bottom +
  "right:"+pos.right +
  "width:"+pos.width +
  "height:"+pos.height

标签: 无

非特殊说明,本博所有文章均为博主原创。

头像也是LOGO
未来博客 博主大人
到了这个年纪,不应该再彷徨!

发表评论



 


已有 12349 条评论 1


  1. i99BET

    Excellent post! We will be linking to this particularly great content on our website. Keep up the great writing.

    回复 2019年12月9日
  2. i99BET

    Great information. Lucky me I came across your website by chance (stumbleupon). I’ve book-marked it for later!

    回复 2019年12月9日
  3. i99BET

    I need to to thank you for this very good read!! I definitely enjoyed every bit of it. I’ve got you book-marked to check out new stuff you post…

    回复 2019年12月8日
  4. i99BET

    It’s nearly impossible to find well-informed people in this particular topic, but you sound like you know what you’re talking about! Thanks

    回复 2019年12月8日
  5. Furniture assembly help

    Thank you for every other fantastic post. The place else could anybody get that kind of information in such an ideal means of writing? I have a presentation next week, and I’m on the search for such information.

    回复 2019年12月8日
  6. Furniture assembly help

    Hello my loved one! I wish to say that this article is awesome, nice written and include approximately all important infos. I’d like to peer extra posts like this.

    回复 2019年12月8日
  7. Furniture installation

    I simply needed to thank you very much yet again. I do not know what I could possibly have gone through without those suggestions contributed by you on my question. This was a very frightening matter in my circumstances, but discovering the very specialised manner you managed the issue took me to weep over contentment. Extremely thankful for your assistance and in addition sincerely hope you recognize what an amazing job your are doing training some other people all through your webblog. Probably you have never encountered all of us.

    回复 2019年12月8日
  8. Furniture installation

    Simply want to say your article is as astonishing. The clearness on your submit is simply excellent and that i could suppose you are knowledgeable on this subject. Well together with your permission let me to seize your RSS feed to keep up to date with imminent post. Thank you 1,000,000 and please continue the rewarding work.

    回复 2019年12月8日
  9. UFABET

    Hi there! This post couldn’t be written much better! Going through this post reminds me of my previous roommate! He continually kept talking about this. I most certainly will forward this information to him. Fairly certain he’ll have a great read. Many thanks for sharing!

    回复 2019年12月8日
  10. Furniture installation team

    I needed to put you a very little remark so as to thank you so much over again for the exceptional tricks you have shown at this time. It’s certainly extremely generous of people like you giving publicly all many individuals could possibly have offered for sale for an ebook to make some profit for themselves, and in particular now that you might well have done it if you ever considered necessary. Those ideas as well acted like a easy way to realize that other individuals have the same keenness just as my own to know great deal more when considering this condition. I am certain there are several more fun moments in the future for individuals that looked over your site.

    回复 2019年12月7日
  11. assemblers incorporated

    What i do not realize is in truth how you’re not really a lot more smartly-liked than you may be right now. You’re very intelligent. You understand therefore significantly on the subject of this subject, made me in my view imagine it from a lot of various angles. Its like women and men are not fascinated unless it is something to accomplish with Woman gaga! Your individual stuffs outstanding. At all times deal with it up!

    回复 2019年12月7日
  12. John Deere Technical Manuals

    I was really lucky to find this internet site on bing, just what I was searching for : D likewise saved to favorites .

    回复 2019年12月7日
  13. UFABET

    Nice post. I learn something totally new and challenging on sites I stumbleupon on a daily basis. It’s always exciting to read articles from other writers and use something from other websites.

    回复 2019年12月7日
  14. AMI installation

    Write more, thats all I have to say. Literally, it seems as though you relied on the video to make your point. You obviously know what youre talking about, why throw away your intelligence on just posting videos to your weblog when you could be giving us something informative to read?

    回复 2019年12月7日
  15. Business furniture installation

    Hi there, simply became aware of your blog via Google, and found that it is really informative. I’m gonna be careful for brussels. I’ll appreciate for those who continue this in future. A lot of people can be benefited from your writing. Cheers!

    回复 2019年12月7日
  16. ตู้ม้าออนไลน์ apk

    Good post. I study something tougher on totally different blogs everyday. It should at all times be stimulating to learn content from different writers and follow just a little one thing from their store. I’d favor to use some with the content material on my blog whether or not you don’t mind. Natually I’ll provide you with a hyperlink in your internet blog. Thanks for sharing.

    回复 2019年12月6日
  17. 해외축구중계

    Attractive section of content. I just stumbled upon your weblog and in accession capital to assert that I get actually enjoyed account your blog posts. Any way I will be subscribing to your augment and even I achievement you access consistently fast.

    回复 2019年12月6日
  18. nba중계

    My brother suggested I might like this web site. He was totally right. This post actually made my day. You cann’t imagine just how much time I had spent for this information! Thanks!

    回复 2019年12月6日
  19. udaipur escorts

    What i don’t understood is actually how you’re not really a lot more well-appreciated than you may be now. You’re so intelligent. You realize thus considerably on the subject of this matter, made me in my opinion imagine it from a lot of various angles. Its like men and women are not interested until it is one thing to accomplish with Woman gaga! Your personal stuffs excellent. All the time maintain it up!

    回复 2019年12月6日
  20. togel online

    I know this if off topic but I’m looking into starting my own weblog and was wondering what all is needed to get setup? I’m assuming having a blog like yours would cost a pretty penny? I’m not very web savvy so I’m not 100% certain. Any tips or advice would be greatly appreciated. Thank you

    回复 2019年12月6日
  21. udaipur escorts

    I should say also believe that mesothelioma is a exceptional form of cancer malignancy that is normally found in those people previously subjected to asbestos. Cancerous tissue form inside mesothelium, which is a defensive lining which covers the vast majority of body’s areas. These cells usually form inside lining from the lungs, abdomen, or the sac that encircles one’s heart. Thanks for sharing your ideas.

    回复 2019年12月5日
  22. togel hk

    As soon as I detected this site I went on reddit to share some of the love with them.

    回复 2019年12月5日
  23. Encontros de Sexo

    An impressive share! I have just forwarded this onto a coworker who had been doing a little homework on this. And he actually bought me lunch simply because I found it for him… lol. So allow me to reword this…. Thanks for the meal!! But yeah, thanks for spending the time to talk about this subject here on your internet site.

    回复 2019年12月5日
  24. nike shox

    After examine just a few of the blog posts in your website now, and I really like your method of blogging. I bookmarked it to my bookmark website checklist and will likely be checking again soon. Pls check out my web page as effectively and let me know what you think.

    回复 2019年12月5日
  25. semsi

    I like it when folks get together and share thoughts. Great website, continue the good work!

    回复 2019年12月4日
  26. i99bet

    Way cool! Some very valid points! I appreciate you penning this article plus the rest of the website is really good.

    回复 2019年12月4日
  27. i99bet

    I like reading a post that can make men and women think. Also, thanks for allowing for me to comment.

    回复 2019年12月4日
  28. i99bet

    I was pretty pleased to uncover this site. I wanted to thank you for your time just for this wonderful read!! I definitely appreciated every bit of it and I have you bookmarked to see new things on your website.

    回复 2019年12月3日
  29. John Deere Repair Manuals

    Would love to always get updated great blog ! .

    回复 2019年12月3日
  30. i99bet

    Hello there! I simply wish to give you a big thumbs up for the great info you’ve got right here on this post. I will be returning to your blog for more soon.

    回复 2019年12月3日
  31. Claude Cronce

    Way cool! Some very valid points! I appreciate you penning this post and also the rest of the website is also very good.

    回复 2019年12月2日
  32. yeezys

    This web site can be a walk-by for the entire information you needed about this and didn抰 know who to ask. Glimpse right here, and you抣l positively uncover it.

    回复 2019年12月2日
  33. Michael Gleaton

    This site certainly has all of the information I wanted about this subject and didn’t know who to ask.

    回复 2019年12月2日
  34. Yolande Matelic

    After I originally commented I appear to have clicked the -Notify me when new comments are added- checkbox and from now on each time a comment is added I recieve 4 emails with the same comment. Is there a means you are able to remove me from that service? Kudos.

    回复 2019年12月2日
  35. Tractor Workshop Manuals

    I’d have to consult with you here. Which is not some thing I usually do! I enjoy reading an article which will make people feel. Also, many thanks for permitting me to comment!

    回复 2019年12月1日
  36. Seo Services Gorzow Wielkopolski

    Excellent read, I just passed this onto a colleague who was doing a little research on that. And he actually bought me lunch since I found it for him smile Thus let me rephrase that: Thank you for lunch! “Remember It is 10 times harder to command the ear than to catch the eye.” by Duncan Maxwell Anderson.

    回复 2019年11月30日
  37. Strony Internetowe Gorzów Wlkp

    I’ll immediately seize your rss feed as I can’t in finding your email subscription hyperlink or newsletter service. Do you have any? Kindly let me know in order that I may just subscribe. Thanks.

    回复 2019年11月30日
  38. nike foamposite

    Nice post. I study something more challenging on completely different blogs everyday. It will always be stimulating to read content material from other writers and apply a bit of something from their store. I抎 favor to make use of some with the content on my weblog whether or not you don抰 mind. Natually I抣l provide you with a link on your web blog. Thanks for sharing.

    回复 2019年11月29日
  39. Adalberto Failor

    of fighters to grace the Manny Pacquiao vs Shane Mosley Pay Per View event scheduled today

    回复 2019年11月29日
  40. Taunya Goodaker

    I will right away grasp your rss as I can not in finding your e-mail subscription hyperlink or e-newsletter service. Do you’ve any? Kindly permit me realize so that I could subscribe. Thanks.

    回复 2019年11月28日
  41. Norman Broxson

    Amazing you hit it on the “dot” the – Gulvafslibning | Kurt Gulvmand I will post to Twitter and Facebook By the way whats the latest on Bahrain awesome news reports.

    回复 2019年11月28日
  42. Odell Scibetta

    well done . Thanks for info . Ill be back. Thanks again

    回复 2019年11月28日
  43. hermes birkin

    I抦 impressed, I have to say. Actually hardly ever do I encounter a weblog that抯 each educative and entertaining, and let me inform you, you might have hit the nail on the head. Your idea is excellent; the problem is one thing that not enough people are speaking intelligently about. I’m very joyful that I stumbled throughout this in my search for something relating to this.

    回复 2019年11月25日
  44. click reference

    I just want to say I am just beginner to blogs and certainly loved this blog site. Most likely I’m planning to bookmark your blog . You really have amazing posts. Regards for revealing your blog site.

    回复 2019年11月24日
  45. address

    I just want to mention I am just newbie to weblog and certainly loved your web site. Likely I’m planning to bookmark your site . You definitely have exceptional articles. Appreciate it for sharing your web site.

    回复 2019年11月24日
  46. jordan 13

    After study a few of the weblog posts on your website now, and I actually like your manner of blogging. I bookmarked it to my bookmark website checklist and might be checking back soon. Pls check out my web page as effectively and let me know what you think.

    回复 2019年11月18日
  47. StevDede

    Amoxicillin Artificial Fruit Gum Flavor Buy Amoxicillin Online Uk canadian pharmacy cialis 20mg Acheter Du Levitran Taking Amoxicillin While Pregnant

    回复 2019年11月14日
  48. test

    test

    回复 2019年7月31日