Perdón por la estúpida pregunta 101. No estoy seguro de por qué esto no funciona. Estoy tratando de iterar a través de las diversas propiedades de margen que se devuelven usando getComputedStyle()
Cualquier ayuda sería muy apreciada gracias de antemano - CES
const constContentContainerStyles = window.getComputedStyle(constHTMLContentContainer); let tmpStylesArray = ["marginTop", "marginLeft", "marginBottom", "marginRight"]; let x = 0; for (let i = 0; i < tmpStylesArray.length; i++) { //This throws undefined error // x = constContentContainerStyles.tmpStylesArray[i]; //This returns 0 x = constContentContainerStyles.getPropertyValue(tmpStylesArray[i]); console.log(tmpStylesArray[i] + " - " + x); // returns the correct value console.log(constContentContainerStyles.marginTop); };getPropertyValue espera nombres en mayúsculas y minúsculas ( "margin-top" , etc., no "marginTop" , etc.).
Pero puede usar el objeto de estilo directamente a través de la notación de corchetes:
console.log(constContentContainerStyles[tmpStylesArray[i]]); Eso admite camelCase ( "marginTop" ) y hyphen-case ( "margin-top" ):
const constHTMLContentContainer = document.getElementById("target"); const constContentContainerStyles = window.getComputedStyle(constHTMLContentContainer); const tmpStylesArray = [ "marginTop", "margin-top", // Added this to show it works too "marginLeft", "marginBottom", "marginRight" ]; for (const name of tmpStylesArray) { const x = constContentContainerStyles[name]; const note = name.includes("-") ? "Hyphen case works too: " : ""; console.log(`${note}${name} = ${x}`); } #target { margin: 10px 20px 30px 40px; } <div id="target">x</div>