原生JS获取坐标

福尔摩斯对我笑 2019-06-15 12219 次 4278条

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

发表评论



 


已有 4278 条评论 1


  1. Lexus888 versi mobile

    I do not even understand how I finished up right here, but
    I thought this post used to be great. I do not recognise who you might be but certainly you are going to a well-known blogger for those who
    are not already. Cheers!

    回复 2020年2月26日
  2. gook

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

    回复 2020年2月26日
  3. cocksuck

    I’m impressed, I must say. Rarely do I encounter a blog that’s both equally educative and interesting, and without a doubt, you’ve hit the nail on the head. The problem is something which too few men and women are speaking intelligently about. Now i’m very happy that I came across this during my hunt for something relating to this.

    回复 2020年2月26日
  4. Baltimore SEO

    I could not refrain from commenting. Very well written.

    回复 2020年2月26日
  5. xxx free porn movies

    Does your website have a contact page? I’m having problems locating it but,
    I’d like to shoot you an email. I’ve got some ideas
    for your blog you might be interested in hearing. Either way, great blog and I look forward to seeing it improve over time.

    回复 2020年2月26日
  6. xxx mom porn videos

    Excellent post. Keep writing such kind of information on your
    site. Im really impressed by your blog.
    Hello there, You’ve done an excellent job. I’ll certainly
    digg it and individually recommend to my friends.
    I’m sure they’ll be benefited from this web site.

    回复 2020年2月26日
  7. https://joker123.dev/

    มือใหม่ป๋าแนะนำหน่อยนะคะ

    回复 2020年2月26日
  8. getlikesfollowerscheap.com

    This design is incredible! You most certainly know how to
    keep a reader entertained. Between your wit and your videos, I was almost moved
    to start my own blog (well, almost…HaHa!) Excellent job.

    I really loved what you had to say, and more than that, how you presented it.
    Too cool!

    回复 2020年2月26日
  9. chattrube

    An Adult Friend Finder That Works For Swingers And
    Singles! Step Sis And Friend Make Three Prank playing turns into a wild taboo threesome with these two small tits petite brunettes.
    Small Boobs Brunette Beauty Lovely young lady with flat tits and a smashing naked body posing.
    Roof Top Veggie Banging Naughty lady Billy Raise pleasures her slick twat with
    a big cucumber and a banana. Pleasing Her Smooth Coed Pussy At Home Tiny tits blonde strips off jeans and top by the kitchen for some toy banging.

    Pervy Step Brother Small tits brunette step sister turns him
    on and she gives him what he wants. Naughty Step Sister In Glasses
    This starts out as a frustrated relation buts ends being a taboo affair.
    The big story then was the massive profits of a hidden industry
    that seemed as though it might be on the brink of being acknowledged by the
    mainstream.

    回复 2020年2月26日
  10. pussy

    Excellent site you have got here.. It’s hard to find excellent writing like yours nowadays. I honestly appreciate people like you! Take care!!

    回复 2020年2月26日
  11. penisfucker

    After checking out a few of the blog posts on your web site, I really appreciate your way of blogging. I book-marked it to my bookmark site list and will be checking back soon. Please check out my website as well and let me know what you think.

    回复 2020年2月26日
  12. anal

    Excellent post. I definitely love this website. Stick with it!

    回复 2020年2月26日
  13. erect

    Hello there! I simply wish to give you a huge thumbs up for the excellent info you have got right here on this post. I’ll be coming back to your website for more soon.

    回复 2020年2月26日
  14. assshole

    Howdy! This blog post couldn’t be written much better! Looking at this post reminds me of my previous roommate! He continually kept preaching about this. I most certainly will forward this information to him. Pretty sure he’s going to have a very good read. I appreciate you for sharing!

    回复 2020年2月26日
  15. erotic

    You are so interesting! I don’t think I’ve read through anything like that before. So great to discover somebody with genuine thoughts on this topic. Really.. many thanks for starting this up. This web site is something that is needed on the web, someone with some originality!

    回复 2020年2月26日
  16. nätcasino

    online casino with slot tournaments
    gokkasten
    online website craps

    回复 2020年2月26日
  17. lexus888 Versi mobile

    I used to be able to find good advice from your content.

    回复 2020年2月26日
  18. faggot

    That is a good tip especially to those new to the blogosphere. Short but very accurate info… Thank you for sharing this one. A must read post!

    回复 2020年2月26日
  19. jasa sbu

    I blog often and I really thank you for your content. This great article has truly peaked my interest. I will bookmark your website and keep checking for new information about once a week. I subscribed to your RSS feed too.

    回复 2020年2月26日
  20. Hasil keluaran sgp

    Gгеetіngs! Very helpful advice within this article!
    It is the little chwnges that produce the lɑrgest changes.
    Thanks for sharing!

    回复 2020年2月26日
  21. anal

    Having read this I believed it was really enlightening. I appreciate you taking the time and effort to put this content together. I once again find myself spending way too much time both reading and posting comments. But so what, it was still worth it!

    回复 2020年2月26日
  22. 익산출장코스가격『카톡- M o46』【moo2 7.c0M】출장최강미녀출장샵예약포항Y⇃ 2019-03-01-20-21익산⇏AIJ♬콜걸후기출장서비스출장샵╫출장샵예약포항➚출장소이스홍성➺익산

    A fascinating discussion is definitely worth comment. I believe that you should write more about this issue, it may not be a taboo matter but generally people don’t speak about such topics. To the next! All the best!!

    回复 2020年2月26日
  23. 『카지노사이트』☱-캐츠비카지노-☆라스베가스 포커ノ〔〕♞☆v4[]해적바둑이게임N온카 조작U2[][]큐2019-03-19-17-57↜ⓥ과일 슬롯 머신[]맞고게임[]

    An impressive share! I’ve just forwarded this onto a friend who has been doing a little research on this. And he in fact bought me breakfast simply because I discovered it for him… lol. So allow me to reword this…. Thank YOU for the meal!! But yeah, thanks for spending time to talk about this topic here on your website.

    回复 2020年2月26日
  24. 호 게임

    Definitely imagine that which you said. Your favorite reason seemed
    to be on the web the easiest factor to remember of. I say to
    you, I definitely get irked at the same time as other folks think about
    worries that they plainly don’t know about. You controlled to hit the nail upon the
    highest and outlined out the entire thing without having side-effects , folks could take a signal.
    Will likely be back to get more. Thanks

    回复 2020年2月26日
  25. Raleigh NC

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

    回复 2020年2月26日
  26. joker123.dev

    Mitosbet bikin gegret

    回复 2020年2月26日
  27. cunt

    This is the right web site for everyone who wants to understand this topic. You know a whole lot its almost tough to argue with you (not that I really would want to…HaHa). You definitely put a brand new spin on a topic that’s been written about for years. Wonderful stuff, just excellent!

    回复 2020年2月26日
  28. orgasm

    I needed to thank you for this excellent read!! I certainly loved every bit of it. I’ve got you bookmarked to check out new things you post…

    回复 2020年2月26日
  29. modern construction

    Howdy! Would you mind if I share your blog with my facebook group? There’s a lot of people that I think would really appreciate your content. Please let me know. Cheers

    回复 2020年2月26日
  30. tc bolts

    Hey there! Someone in my Facebook group shared this website with us so I came to check it out. I’m definitely loving the information. I’m book-marking and will be tweeting this to my followers! Terrific blog and superb design and style.

    回复 2020年2月26日
  31. id pro

    Bandar Poker

    回复 2020年2月26日
  32. a325 tc bolts

    I was curious if you ever thought of changing the layout of your website? Its very well written; I love what youve got to say. But maybe you could a little more in the way of content so people could connect with it better. Youve got an awful lot of text for only having 1 or 2 images. Maybe you could space it out better?

    回复 2020年2月26日
  33. douche

    Hello there! This post could not be written any better! Going through this article reminds me of my previous roommate! He always kept preaching about this. I most certainly will send this article to him. Pretty sure he will have a very good read. I appreciate you for sharing!

    回复 2020年2月26日
  34. free fortnite skins Generator

    Greate article. Keep writing such kind of info on your blog.
    Im really impressed by your site.
    Hello there, You’ve performed a great job. I’ll certainly digg it and individually recommend to my friends.
    I am sure they’ll be benefited from this website.

    回复 2020年2月25日
  35. Lottery

    Good post. I learn something totally new and challenging on websites I stumbleupon every day. It will always be interesting to read content from other authors and practice something from their web sites.

    回复 2020年2月25日
  36. webcam

    It’s hard to come by experienced people for this topic, but you sound like you know what you’re talking about! Thanks

    回复 2020年2月25日
  37. Home Inspector Fayetteville NC

    It’s hard to come by knowledgeable people on this subject, but you seem like you know what you’re talking about! Thanks

    回复 2020年2月25日
  38. viagra

    Spot on with this write-up, I seriously believe this amazing site needs a lot more attention. I’ll probably be back again to read more, thanks for the information!

    回复 2020年2月25日
  39. f1852 tc bolts

    Wow! This blog looks exactly like my old one! It’s on a entirely different topic but it has pretty much the same layout and design. Excellent choice of colors!

    回复 2020年2月25日
  40. (삼척출장맛사지)リ24시출장샵✪부천 대딸방♡《카톡hwp63》┱(qьx488.сом)삼척J0Q[]╢2019-03-19-16-50⇉THU➽υ╖삼척ku◐출장샵예약포항익산 모텔 가격[]⇔d1구미 모텔[][]

    The very next time I read a blog, I hope that it won’t fail me just as much as this particular one. I mean, I know it was my choice to read through, however I actually thought you would have something helpful to talk about. All I hear is a bunch of moaning about something you could possibly fix if you were not too busy seeking attention.

    回复 2020年2月25日
  41. 인천콜걸업소카톡- Po 34《Po o34.c0M》콜걸출장안마출장시Y☈웃2019-04-01-16-35인천→AIJ☛동출장마사지출장샵안내출장몸매최고↸콜걸추천┟동출장마사지↕인천

    Everything is very open with a really clear description of the issues. It was truly informative. Your site is very useful. Many thanks for sharing!

    回复 2020年2月25日
  42. assshole

    Greetings! Very helpful advice in this particular article! It’s the little changes that make the largest changes. Many thanks for sharing!

    回复 2020年2月25日
  43. xxx

    I like looking through a post that can make people think. Also, thanks for allowing for me to comment!

    回复 2020年2月25日
  44. lexus888 sabung ayam

    Hey, I think your site might be having browser compatibility issues.

    When I look at your blog site in Firefox, it looks fine but when opening in Internet Explorer, it has some overlapping.

    I just wanted to give you a quick heads up! Other
    then that, amazing blog!

    回复 2020年2月25日
  45. crap

    Nice post. I learn something new and challenging on sites I stumbleupon on a daily basis. It will always be interesting to read through articles from other authors and practice something from their websites.

    回复 2020年2月25日
  46. 카지노 게임

    Every weekend i used to visit this site, for the reason that i wish for enjoyment, for the reason that this this web site conations truly pleasant
    funny information too.

    回复 2020年2月25日
  47. Debris Removal Raleigh NC

    Aw, this was an extremely good post. Taking a few minutes and actual effort to make a great article… but what can I say… I procrastinate a whole lot and don’t manage to get anything done.

    回复 2020年2月25日