Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $YECBGYFECGEAFWHA as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2

Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $BBWFDDBHHYHDXXAB as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2
如何判断两个并列 DOM 元素是否包含在另一个 DOM 元素内?_创想鸟

如何判断两个并列 DOM 元素是否包含在另一个 DOM 元素内?

如何判断两个并列 DOM 元素是否包含在另一个 DOM 元素内?

判断两个并列dom是否包含在内

对于DOM元素是否包含在内,可以根据以下规则判断:

获取容器元素和要判断元素的边界框。

判断是否满足以下条件:

要判断元素的顶部边界大于或等于容器元素的顶部边界。要判断元素的左侧边界大于或等于容器元素的左侧边界。要判断元素的底部边界小于或等于容器元素的底部边界。要判断元素的右侧边界小于或等于容器元素的右侧边界。

如果满足上述条件,则表示要判断元素包含在容器元素内。

具体示例如下:

function isContained(element, container) {  const containerRect = container.getBoundingClientRect();  const elementRect = element.getBoundingClientRect();  return (    elementRect.top >= containerRect.top &&    elementRect.left >= containerRect.left &&    elementRect.bottom <= containerRect.bottom &&    elementRect.right <= containerRect.right  );}const mark = document.querySelector(".mark");const item1 = document.querySelector(".item1");const item2 = document.querySelector(".item2");const item3 = document.querySelector(".item3");console.log("Item 1 is contained:", isContained(item1, mark));console.log("Item 2 is contained:", isContained(item2, mark));console.log("Item 3 is contained:", isContained(item3, mark));

运行以上代码,会在控制台中输出:

Item 1 is contained: trueItem 2 is contained: trueItem 3 is contained: false

通过调用 isContained 函数,我们可以判断出 item1 和 item2 都包含在 mark 元素内,而 item3 不包含在 mark 元素内。

以上就是如何判断两个并列 DOM 元素是否包含在另一个 DOM 元素内?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1558241.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
如何使用弹性布局使div在可视区域内水平垂直居中?
上一篇 2025年12月22日 03:39:06
如何实现浏览器可视区域内DIV精确居中并自适应内容?
下一篇 2025年12月22日 03:39:17

相关推荐

发表回复

登录后才能评论
关注微信