Ejemplo Genérico de Acceso a Propiedades del DOM

INICIO

Este es un párrafo genérico en el que vamos a modificar las propiedades usando JavaScript.

<p id="parrafo">Este es un párrafo genérico en el que vamos a modificar las propiedades usando JavaScript.</p>

<button onclick="modificarPropiedades()">Modificar Propiedades del Párrafo</button>

<script>
    function modificarPropiedades() {
        // Seleccionamos el párrafo por su ID
        const parrafo = document.getElementById("parrafo");
        
        // Accedemos a las propiedades actuales y las mostramos en un alert
        const colorActual = window.getComputedStyle(parrafo).color; // Obtener el color actual
        const fontSizeActual = window.getComputedStyle(parrafo).fontSize; // Obtener el tamaño de fuente actual
        
        const confirmacion = confirm("Texto actual: " + parrafo.innerHTML +
            "\nColor actual: " + colorActual +
            "\nTamaño de fuente actual: " + fontSizeActual +
            "\n\n¿Deseas cambiar el texto a rojo y el tamaño a 40px?");
        
        // Solo si el usuario confirma, realizamos los cambios
        if (confirmacion) {
            parrafo.innerHTML = "El texto del párrafo ha sido modificado.";
            parrafo.style.color = "blue";
            parrafo.style.fontSize = "40px";
        }
    }
</script>