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 definir una función JS propia para obtener el estilo calculado de elementos HTML.

02 Aug, 2023 Programación

let element = id(‘mydiv’); // id() es un selector de elemento por id
let style = getComputedStyle(element);
let eleHeight = parseInt(style.height);

Sé que puedo obtener cualquier valor de estilo usando el código de JavaScript anterior.

Ahora, enfócate en lo siguiente.

function getCSS(css, element) {
return parseInt(getComputedStyle(element)[css]);
}

// uso

let eleHeight = getCSS(‘height’, id(‘mydiv’)); // pero devolverá ‘NaN’

Estoy tratando de crear mi propia función instantánea para hacer esto.
Por favor, haz que funcione.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para hacer que la función getCSS sea utilizable, debes reemplazar css con propertyName dentro del método getComputedStyle.

    Aquí hay una versión actualizada de la función getCSS:

    function getCSS(propertyName, element) {
  return parseInt(window.getComputedStyle(element)[propertyName]);
}

    Esta función toma dos argumentos: propertyName (una cadena que representa el nombre de la propiedad CSS de la que deseas obtener el valor) y element (el elemento DOM cuya propiedad CSS deseas obtener).

    Cuando se llama, devolverá el valor entero analizado de la propiedad CSS especificada.

    Ejemplo de uso:

    let eleHeight = getCSS('height', id('mydiv')); // devuelve la altura del elemento 'mydiv' como un número entero

    Ten en cuenta que si la propiedad CSS especificada no es un valor numérico, parseInt devolverá NaN. En esos casos, es posible que necesites utilizar un método diferente para extraer el valor del objeto style devuelto por getComputedStyle.

Comments are closed.