es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo puedo encontrar todos los elementos con bordes [border-radius], etc aplicado?

25 Jul, 2023 Programación

Puedo consultar elementos, por ejemplo, que tengan una propiedad de título, como:

$$('*[title]')

Digamos que quiero encontrar todos los elementos con un borde o un radio de borde aplicado, intenté algunas consultas pero no funcionaron.

$$('*[border-width]')
// no devuelve nada
$$('*[border-width="1px"]')
// no devuelve nada

Esto se aplica a nivel de clase, pero probé con algunos estilos en línea y aún no funciona.

Entonces, ¿cómo puedes encontrar elementos con, digamos, un borde específico, un relleno, etc, aplicado?

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para encontrar elementos con bordes específicos, rellenos, etc. aplicados, puedes utilizar la siguiente consulta:

    $$('*[style*="border"], *[style*="padding"], *[style*="margin"], *[style*="border-radius"]')

    Esta consulta buscará elementos con estilos en línea que incluyan alguna de las propiedades especificadas. El selector *= se utiliza para hacer coincidir cualquier atributo que contenga el valor especificado.

    Alternativamente, también puedes utilizar el método computedStyleMap() para obtener los estilos calculados de un elemento y verificar los valores de propiedades específicas. Aquí tienes un ejemplo:

    const elementosConBorde = [];
const todosLosElementos = document.querySelectorAll('*');

todosLosElementos.forEach(elemento => {
  const estilosCalculados = elemento.computedStyleMap();

  if (estilosCalculados.get('border-width').value !== '0px' ||
      estilosCalculados.get('border-top-left-radius').value !== '0px') {
    elementosConBorde.push(elemento);
  }
});

console.log(elementosConBorde);

    Este código recorrerá todos los elementos del documento, obtendrá sus estilos calculados utilizando computedStyleMap() y verificará si tienen un valor de borde o radio de borde distinto de cero. Los elementos que cumplan con los criterios se agregarán al arreglo elementosConBorde.

Comments are closed.