Ejemplo Genérico de Acceso a Propiedades del DOM

<h1>Ejemplo Genérico de Acceso a Propiedades del DOM</h1>
<section>
<p id="parrafo">Este es un párrafo genérico en el que vamos a modificar las propiedades usando JavaScript.</p>

<!-- Input para seleccionar el color -->
<label for="colorInput">Elige un color:</label>
<input type="color" id="colorInput" value="#000000">

<!-- Input para seleccionar el tamaño de fuente -->
<label for="fontSizeInput">Introduce el tamaño de fuente (en px):</label>
<input type="number" id="fontSizeInput" value="12" min="1" max="100">

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

<script>
    function modificarPropiedades() {
        // Seleccionamos el párrafo por su ID
        const parrafo = document.getElementById("parrafo");

        // Obtenemos los valores actuales
        const colorActual = window.getComputedStyle(parrafo).color;
        const fontSizeActual = window.getComputedStyle(parrafo).fontSize;
        
        // Obtenemos los valores ingresados por el usuario
        const nuevoColor = document.getElementById("colorInput").value;
        const nuevoTamaño = document.getElementById("fontSizeInput").value + "px";

        // Mostramos los valores actuales y confirmamos el cambio
        const confirmacion = confirm("Texto actual: " + parrafo.innerHTML +
            "\nColor actual: " + colorActual +
            "\nTamaño de fuente actual: " + fontSizeActual +
            "\n\n¿Deseas cambiar el color a " + nuevoColor + " y el tamaño a " + nuevoTamaño + "?");

        // Solo si el usuario confirma, realizamos los cambios
        if (confirmacion) {
            parrafo.style.color = nuevoColor;
            parrafo.style.fontSize = nuevoTamaño;
        }
    }
</script>