原生JS获取坐标

福尔摩斯对我笑 2019-06-15 90645 次 12690条

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
未来博客 博主大人
到了这个年纪,不应该再彷徨!

发表评论



 


已有 12690 条评论 1


  1. 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日
  2. 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日
  3. 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日
  4. 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日
  5. 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日
  6. 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日
  7. ตู้ม้าออนไลน์ 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日
  8. 해외축구중계

    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日
  9. 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日
  10. 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日
  11. 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日
  12. 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日
  13. togel hk

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

    回复 2019年12月5日
  14. 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日
  15. 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日
  16. semsi

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

    回复 2019年12月4日
  17. 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日
  18. i99bet

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

    回复 2019年12月4日
  19. 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日
  20. John Deere Repair Manuals

    Would love to always get updated great blog ! .

    回复 2019年12月3日
  21. 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日
  22. 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日
  23. 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日
  24. 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日
  25. 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日
  26. 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日
  27. 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日
  28. 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日
  29. 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日
  30. Adalberto Failor

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

    回复 2019年11月29日
  31. 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日
  32. 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日
  33. Odell Scibetta

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

    回复 2019年11月28日
  34. 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日
  35. 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日
  36. 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日
  37. 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日
  38. StevDede

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

    回复 2019年11月14日
  39. test

    test

    回复 2019年7月31日