原生JS获取坐标

福尔摩斯对我笑 2019-06-15 27318 次 6613条

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

发表评论



 


已有 6613 条评论 1


  1. www.tefwin.com

    GooԀ site you’ve got here.. It�s dіffіcult to find good quality writing like yours nowadays.
    I honestly appreciate people like үou! Take care!! http://www.tefwin.com/sunshine-wedding-a-tale/

    回复 2020年3月31日
  2. judi sicbo terpercaya

    you are really a excellent webmaster. The website loading speed is
    incredible. It seems that you’re doing any distinctive
    trick. In addition, The contents are masterwork.
    you have done a excellent process in this subject!

    回复 2020年3月31日
  3. 온라인 카지노

    I am really enjoying the theme/design of your website.
    Do you ever run into any internet browser compatibility problems?
    A number of my blog visitors have complained about my site not operating correctly in Explorer but looks great in Opera.
    Do you have any suggestions to help fix this problem?

    回复 2020年3月31日
  4. electric scooter

    Very nice post. I just stumbled upon your weblog and wished to say
    that I’ve truly enjoyed browsing your blog posts. After all I’ll
    be subscribing to your feed and I hope you write again soon!

    回复 2020年3月31日
  5. tangerline.wordpress.com

    Ahaa, its fastidious dialogue concerning this article here at this
    weblog, I have read all that, so at this time me also commenting here.

    回复 2020年3月31日
  6. 바카라 스토리

    Hmm it appears like your site ate my first comment (it was extremely long) so I guess I’ll just sum it up
    what I wrote and say, I’m thoroughly enjoying your blog.
    I as well am an aspiring blog writer but I’m still
    new to the whole thing. Do you have any helpful hints for newbie blog writers?
    I’d genuinely appreciate it.

    回复 2020年3月31日
  7. 더킹 카지노

    After checking out a number of the articles on your site, I truly appreciate
    your technique of writing a blog. I saved it to my bookmark site list and will be checking back in the near future.
    Please visit my web site too and tell me
    your opinion.

    回复 2020年3月31日
  8. kristenjack.wordpress.com

    Amazing issues here. I’m very happy to peer your article.
    Thank you so much and I am looking ahead
    to contact you. Will you kindly drop me a e-mail?

    回复 2020年3月31日
  9. IELTS classes

    Have you ever considered creating an ebook or guest authoring on other sites?

    I have a blog centered on the same ideas you discuss and would really like to have you share
    some stories/information. I know my viewers would appreciate your work.

    If you are even remotely interested, feel free to send me an e mail.

    回复 2020年3月31日
  10. walkerharrison.travel.blog

    I’d like to find out more? I’d care to find out some additional information.

    回复 2020年3月31日
  11. 솔레어 카지노

    This is really interesting, You are a very skilled blogger.
    I have joined your feed and look forward to
    seeking more of your wonderful post. Also, I
    have shared your site in my social networks!

    回复 2020年3月31日
  12. www.chatabte.com

    The @Conservatives are excellent at announcing several times they’re going to do something and then…
    Not doing it
    Age restrictions on porn sites
    Spending money on the NHS
    Investigating illegality in the 2016 referendum …

    回复 2020年3月31日
  13. nectarine6666.wordpress.com

    At this moment I am ready to do my breakfast, afterward having my
    breakfast coming yet again to read additional news.

    回复 2020年3月31日
  14. http://www.crlazio.org

    Hi there colleagues, nice post and fastidious urging commented
    at this place, I am truly enjoying by these.

    回复 2020年3月31日
  15. francescolclough.wordpress.com

    It’s remarkable to go to see this web site and reading the
    views of all friends concerning this article, while
    I am also eager of getting knowledge.

    回复 2020年3月31日
  16. 룰렛 게임

    It’s hard to find well-informed people about this subject, but
    you seem like you know what you’re talking about!
    Thanks

    回复 2020年3月31日
  17. mchl5.wordpress.com

    Highly energetic post, I enjoyed that a lot. Will there
    be a part 2?

    回复 2020年3月30日
  18. 샌즈 카지노

    Hurrah, that’s what I was looking for, what a information! existing here at this blog, thanks admin of this website.

    回复 2020年3月30日
  19. 샌즈 카지노

    Great items from you, man. I have bear in mind your stuff prior to and you’re just extremely excellent.
    I actually like what you have acquired right here, really like what you are saying and the
    way wherein you assert it. You make it entertaining and you continue to care for to keep
    it wise. I cant wait to read far more from
    you. This is actually a great site.

    回复 2020年3月30日
  20. thebyron.family.blog

    I know this website gives quality depending posts and extra data,
    is there any other site which offers these information in quality?

    回复 2020年3月30日
  21. hazelnutfoods.food.blog

    It is perfect time to make some plans for the future and it is time to be happy.

    I’ve read this post and if I could I wish to suggest
    you few interesting things or tips. Maybe you could
    write next articles referring to this article.

    I want to read even more things about it!

    回复 2020年3月30日
  22. 포커 게임

    I am really impressed with your writing talents as neatly as with the structure for your blog.
    Is that this a paid subject or did you modify it your self?
    Either way stay up the nice quality writing,
    it is rare to peer a nice weblog like this one nowadays..

    回复 2020年3月30日
  23. 에스엠 카지노

    Pretty section of content. I just stumbled upon your web site and in accession capital
    to assert that I get in fact enjoyed account your blog
    posts. Anyway I’ll be subscribing to your feeds and even I achievement you access consistently fast.

    回复 2020年3月30日
  24. 포커 게임

    With havin so much content do you ever run into any problems of plagorism or copyright infringement?

    My site has a lot of exclusive content I’ve either
    authored myself or outsourced but it appears a lot of it is popping it up
    all over the internet without my permission. Do you know any ways to help reduce
    content from being ripped off? I’d definitely appreciate it.

    回复 2020年3月30日
  25. 바카라 사이트

    Thanks for the auspicious writeup. It in reality used to be a enjoyment account it.
    Look complicated to more introduced agreeable from you!
    However, how can we communicate?

    回复 2020年3月30日
  26. Buy Designer Silk Saree

    What’ѕ Hаppening i’m new to this, I stᥙmbled upon this I’ve discovered
    It absolutely useful and it has aided me out loads.
    I’m hoping to contribute & аid other customers like its helped me.

    Good job. https://hotelflyingcrocodile.com/wedding-lehengas-a-attire-to-look-different-on-the-wedding-day-reception-4/

    回复 2020年3月30日
  27. Buy Designer Silk Saree

    What’s Нappening і’m new to this, I stumƄled upon this
    I’ve discovered It absolutely useful and it
    has aided me out loads. I’m hoping to contribute & aid other customегs like its helped me.
    Good job. https://hotelflyingcrocodile.com/wedding-lehengas-a-attire-to-look-different-on-the-wedding-day-reception-4/

    回复 2020年3月30日
  28. themaugham.wordpress.com

    Great site you have here.. It’s difficult to find quality writing like
    yours nowadays. I truly appreciate individuals like you!
    Take care!!

    回复 2020年3月30日
  29. XO 카지노

    I read this piece of writing fully about the resemblance of hottest and previous technologies, it’s remarkable article.

    回复 2020年3月30日
  30. 모나코 카지노

    Hi! I just wanted to ask if you ever have any trouble
    with hackers? My last blog (wordpress) was hacked and I ended
    up losing several weeks of hard work due to no data backup.
    Do you have any solutions to stop hackers?

    回复 2020年3月30日
  31. 에스엠 카지노

    Inspiring quest there. What occurred after? Take care!

    回复 2020年3月30日
  32. sainsbury3.wordpress.com

    Hmm it seems like your website ate my first comment
    (it was extremely long) so I guess I’ll just sum it up what I wrote and say, I’m
    thoroughly enjoying your blog. I as well am an aspiring blog blogger but
    I’m still new to the whole thing. Do you have any recommendations for novice blog writers?
    I’d really appreciate it.

    回复 2020年3月30日
  33. 바카라 사이트

    What’s up everyone, it’s my first pay a quick visit at this site, and piece of writing is actually fruitful
    in favor of me, keep up posting these posts.

    回复 2020年3月30日
  34. 블랙 잭 게임

    It’s awesome to go to see this site and reading the views of all
    mates concerning this piece of writing, while I am also
    keen of getting familiarity.

    回复 2020年3月30日
  35. cantaloupe.design.blog

    Thank you for the good writeup. It in fact was a amusement account it.
    Look advanced to far added agreeable from you! By the way, how
    could we communicate?

    回复 2020年3月30日
  36. 슬롯 머신 게임

    Hmm is anyone else encountering problems with the images on this blog loading?
    I’m trying to figure out if its a problem on my end or if it’s the blog.
    Any suggestions would be greatly appreciated.

    回复 2020年3月30日
  37. blkedefoe.wordpress.com

    Thanks for finally writing about >原生JS获取坐标 | 未来博客
    <Liked it!

    回复 2020年3月30日
  38. 온 카지노

    I’m curious to find out what blog system you are working with?
    I’m experiencing some small security problems with
    my latest site and I would like to find something more
    safeguarded. Do you have any suggestions?

    回复 2020年3月30日
  39. 더킹 카지노

    I’m amazed, I must say. Rarely do I come across a blog that’s both
    equally educative and entertaining, and let me tell you, you have hit the
    nail on the head. The issue is something which not
    enough folks are speaking intelligently about. Now i’m very happy I came across this in my search
    for something relating to this.

    回复 2020年3月30日
  40. 로얄카지노

    I visited many websites however the audio feature for
    audio songs existing at this site is in fact excellent.

    回复 2020年3月30日
  41. xo 카지노

    Hello would you mind letting me know which web host you’re using?
    I’ve loaded your blog in 3 different internet browsers
    and I must say this blog loads a lot quicker then most. Can you suggest a good web hosting provider at a honest price?

    Thank you, I appreciate it!

    回复 2020年3月30日
  42. antna2.wordpress.com

    Amazing! This blog looks just like my old one!

    It’s on a totally different topic but it has pretty much the
    same page layout and design. Superb choice of colors!

    回复 2020年3月30日
  43. 파라오 카지노

    Hi, just wanted to tell you, I loved this blog post. It was inspiring.
    Keep on posting!

    回复 2020年3月30日
  44. 인터넷 바카라

    Excellent write-up. I absolutely appreciate this site.
    Continue the good work!

    回复 2020年3月30日
  45. 바카라 사이트

    Hi there everyone, it’s my first pay a visit at this web
    site, and article is genuinely fruitful designed for me, keep up posting these types of content.

    回复 2020年3月30日
  46. patiencemusic.art.blog

    I do not even know how I ended up here, but I thought this post was good.
    I don’t know who you are but definitely you are going to a famous blogger if you are not already ;
    ) Cheers!

    回复 2020年3月30日
  47. XO 카지노

    I am really loving the theme/design of your site. Do you ever run into any
    browser compatibility problems? A small number of my blog visitors have complained about my site
    not working correctly in Explorer but looks great in Safari.
    Do you have any ideas to help fix this problem?

    回复 2020年3月30日
  48. 온라인 바카라

    It’s enormous that you are getting thoughts from this piece of writing as well as from our discussion made
    at this place.

    回复 2020年3月30日
  49. 온 카지노

    This info is priceless. Where can I find out more?

    回复 2020年3月30日
  50. 우리 카지노

    If some one needs to be updated with newest
    technologies after that he must be pay a visit this web
    site and be up to date daily.

    回复 2020年3月30日