Javascript : Savoir si deux élements du DOM se chevauchent ou se superposent

Les méthodes isOverlapping() et isInside() ont déjà le premier avantage d’être en pur javascript. Leurs fonctionnalités sont donc de déterminer si deux éléments se chevauchent ou se superposent. C’est très pratique lorsque qu’on veut gérer la superposition des labels pour masquer ceux qui sont partiellement visibles par exemple.

getBoundingClientRect

La méthode getBoundingClientRect() est appliquée sur chacun des éléments du DOM afin de déterminer leurs propriétés (en pixels) :

  • left
  • top
  • right
  • bottom

Ces valeurs sont propres au viewport (zone de visualisation) du client sur lequel cette fonction est exécutée.

isOverlapping

[javascript]function isOverlapping (elem1, elem2) {
var rect1 = elem1.getBoundingClientRect();
var rect2 = elem2.getBoundingClientRect();

return !(rect1.right < rect2.left ||
rect1.left > rect2.right ||
rect1.bottom < rect2.top ||
rect1.top > rect2.bottom);
}[/javascript]

La fonction isOverlapping() renvoie donc true si elem1 et elem2 se chevauchent.

isInside

[javascript]function isOverlapping (elem1, elem2) {
var rect1 = elem1.getBoundingClientRect();
var rect2 = elem2.getBoundingClientRect();

return (
((rect2.top <= rect1.top) && (rect1.top <= rect2.bottom)) &&
((rect2.top <= rect1.bottom) && (rect1.bottom <= rect2.bottom)) &&
((rect2.left <= rect1.left) && (rect1.left <= rect2.right)) &&
((rect2.left <= rect1.right) && (rect1.right <= rect2.right))
);
}[/javascript]

La fonction isInside() renvoie donc true si elem1 est entièrement à l’intérieur de elem2 (ou inversement…).

41 Comments Javascript : Savoir si deux élements du DOM se chevauchent ou se superposent

  1. Cole

    When some one searches for his essential thing, therefore he/she
    needs to be available that in detail, therefore that thing
    is maintained over here.

    Reply
  2. runescape servers

    One thing is that onee of the most widespread incentives for using
    your cards is a cash-back as well as rebate offer.
    Generally, you’re goinng to gett 1-5% back for various expenditures.
    Depending oon the card, you may get 1% back again on most expenses, and 5% back again on expenditures
    made at convenience stores, filling stations, grocery stores and ‘member merchants’.

    Reply
  3. epicwin agent

    Hello there! I know this is somewhat off topic but I was wondering which blog platform are you using for
    this website? I’m getting tired of WordPress because
    I’ve had issues with hackers and I’m looking at options for another platform.
    I would be awesome if you could point me in the direction of a good
    platform.

    Feel free to surf to my page: epicwin agent

    Reply
  4. download mod apk

    Thank you a bunch for sharing this with all folks you actually realize what you’re speaking approximately!

    Bookmarked. Please additionally visit my website =).
    We may have a hyperlink trade arrangement between us

    Reply
  5. Pilar

    Good post. I learn something totally new and challenging on blogs I stumbleupon everyday.
    It’s always useful to read through content from other
    authors and use a little something from other sites.

    Reply

Leave a Reply

Your email address will not be published.