Tengo un div grande y divs de hermanos más pequeños colocados dentro de él de esta manera:
.large{ height:20rem; width:20rem; background-color:red; position:absolute; } .item1{ height:5rem; width:5rem; background-color:blue; top:1rem; position:absolute; } .item2{ height:5rem; width:5rem; background-color:green; top:3rem; left:2rem; position:absolute; } .item3{ height:5rem; width:5rem; background-color:yellow; top:1rem; left:6rem; position:absolute; } <div class="large"></div> <div class="item1"></div> <div class="item2"></div> <div class="item3"></div> ¿Cómo obtengo todos los divs pequeños dentro de las dimensiones de divs grandes?
¿Hay algo similar a elementsFromPoint ? Tal vez algo como elementsFromArea
Editar:
suponga que .large abarca 320 píxeles x 320 píxeles
y tengo varios divs más pequeños en mi pantalla, que pueden estar superpuestos a .large o fuera de él
¿Cómo encuentro divs que se superponen a .large ?
Tal vez podríamos obtener la posición de .large y ya tenemos el alto y el ancho y agregarlo a alguna función como esta:
elementsFromArea(large_x,large_y,large_height,large_width);Esto debería devolver una matriz de todos los divs dentro de ese rango dado
( .large es simplemente como referencia, simplemente quiero pasar cualquier área cuadrada dada y encontrar todos los divs que se encuentran dentro de ella)
Puede usar getBoundingClientRect para encontrar los límites izquierdo, derecho, superior e inferior de cada elemento.
Luego pruebe si hay superposición con el elemento grande al ver si la izquierda está a la izquierda del lado derecho del elemento grande y así sucesivamente:
if ( ((l <= Right) && (r >= Left)) && ( (t <= Bottom) && (b >= Top)) )Para realizar una prueba más exhaustiva, en este fragmento, el elemento azul se ha empujado hacia abajo para que solo se superponga parcialmente al elemento grande y el elemento amarillo no se superponga en absoluto.
const large = document.querySelector('.large'); const largeRect = large.getBoundingClientRect(); const Left = largeRect.left; const Right = largeRect.right; const Top = largeRect.top; const Bottom = largeRect.bottom; const items = document.querySelectorAll('.large ~ *'); let overlappers = []; items.forEach(item => { const itemRect = item.getBoundingClientRect(); const l = itemRect.left; const r = itemRect.right; const t = itemRect.top; const b = itemRect.bottom; if (((l <= Right) && (r >= Left)) && ((t <= Bottom) && (b >= Top))) { overlappers.push(item); } }); console.log('The items with these background colors overlap the large element:'); overlappers.forEach(item => { console.log(window.getComputedStyle(item).backgroundColor); }); .large { height: 20rem; width: 20rem; background-color: red; position: absolute; } .item1 { height: 5rem; width: 5rem; background-color: blue; top: 19rem; position: absolute; } .item2 { height: 5rem; width: 5rem; background-color: green; top: 3rem; left: 2rem; position: absolute; } .item3 { height: 5rem; width: 5rem; background-color: yellow; top: 1rem; left: 26rem; position: absolute; } <div> <div class="large"></div> <div class="item1"></div> <div class="item2"></div> <div class="item3"></div> </div>Tenga en cuenta que este fragmento prueba solo aquellos elementos que son hermanos de large en el sentido de CSS, es decir, que siguen a large. Si desea que todos los hermanos sigan a los grandes o sean anteriores, vuelva al padre de los grandes y obtenga todos sus hijos (que, por supuesto, incluirán a los grandes).