原生JS获取坐标

福尔摩斯对我笑 2019-06-15 66675 次 11033条

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

发表评论



 


已有 11033 条评论 1


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

    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日
  3. 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日
  4. 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日
  5. 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日
  6. 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日
  7. togel hk

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

    回复 2019年12月5日
  8. 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日
  9. 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日
  10. semsi

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

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

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

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

    Would love to always get updated great blog ! .

    回复 2019年12月3日
  15. 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日
  16. 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日
  17. 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日
  18. 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日
  19. 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日
  20. 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日
  21. 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日
  22. 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日
  23. 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日
  24. Adalberto Failor

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

    回复 2019年11月29日
  25. 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日
  26. 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日
  27. Odell Scibetta

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

    回复 2019年11月28日
  28. 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日
  29. 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日
  30. 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日
  31. 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日
  32. StevDede

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

    回复 2019年11月14日
  33. test

    test

    回复 2019年7月31日