Estoy tratando de cambiar el estilo de mis elementos HTML sin tocar el archivo HTML y CSS.
resultFirstName.style.fontWeight = "bold"; resultFirstName.style.fontStyle = "uppercase"; resultFirstName.style.fontStyle = "italic"; resultFirstName.style.fontSize = "1.5em"; resultLastName.style.fontWeight = "bold"; resultLastName.style.fontStyle = "uppercase"; resultLastName.style.fontStyle = "italic"; resultLastName.style.fontSize = "1.5em";Estoy tratando de juntar estas dos variables en algo como esto a continuación. Pero no estoy seguro de cómo hacerlo.
resultFirstName + resultLastName.style.fontWeightPuede crear una variable de cadena con todas las propiedades y valores CSS que desee y asignarla al elemento seleccionado. PD para uso de mayúsculas transformación de texto 🙂
const styles = ` font-size: 1.5em; font-style: italic; font-weight: bold; text-transform: uppercase;` document.querySelector('.firtsName').style = styles <h1 class='firtsName'> Test </h1>Podrías hacer lo siguiente:
const styles = { fontWeight: "bold", textTransform: "uppercase", fontStyle: "italic", fontSize: "1.5em" }; Object.assign(resultFirstName.style, styles); Object.assign(resultLastName.style, styles); El uso Object.assign simplemente agregará/actualizará las declaraciones dadas. Otras declaraciones existentes se dejan intactas.
Si desea restablecer todos los estilos de modo que solo los suyos estén configurados para el elemento, puede borrarlos antes de asignar nuevos:
resultFirstName.style.cssText = ''; resultLastName.style.cssText = ''; Nota al margen: he cambiado la propiedad utilizada para el valor en uppercase de fontStyle a textTransform porque probablemente eso es lo que realmente quiso decir.
Puedes usar un bucle for como este:
const elements = [resultFirstName, resultLastName]; for (const element of elements) { element.style.fontWeight = "bold"; element.style.textTransform = "uppercase"; element.style.fontStyle = "italic"; element.style.fontSize = "1.5em"; }Otra forma posible es:
const elements = [resultFirstName, resultLastName]; for (var i = 0; i < elements.length; ++i) { const element = elements[i]; element.style.fontWeight = "bold"; element.style.textTransform = "uppercase"; element.style.fontStyle = "italic"; element.style.fontSize = "1.5em"; }