原生JS获取坐标

福尔摩斯对我笑 2019-06-15 81513 次 12073条

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

发表评论



 


已有 12073 条评论 1


  1. i99bet

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

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

    Would love to always get updated great blog ! .

    回复 2019年12月3日
  4. 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日
  5. 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日
  6. 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日
  7. 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日
  8. 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日
  9. 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日
  10. 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日
  11. 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日
  12. 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日
  13. Adalberto Failor

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

    回复 2019年11月29日
  14. 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日
  15. 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日
  16. Odell Scibetta

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

    回复 2019年11月28日
  17. 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日
  18. 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日
  19. 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日
  20. 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日
  21. StevDede

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

    回复 2019年11月14日
  22. test

    test

    回复 2019年7月31日