4

Tengo un mini-proyecto (práctica para ir agarrando la mano), el ejercicio es el que se especifica aquí. A continuación les dejo todo el código (html, css y js) para que puedan tener un panorama completo de mi situación.

window.addEventListener('load', inicio());

function inicio() {
    document.getElementById('range_tl').addEventListener('change', modifyBorderRadius);
    document.getElementById('range_tr').addEventListener('change', modifyBorderRadius);
    document.getElementById('range_br').addEventListener('change', modifyBorderRadius);
    document.getElementById('range_bl').addEventListener('change', modifyBorderRadius);
}

function modifyBorderRadius() {
    let container = document.getElementById('div_container__modifiable').style;
    let out_range = document.getElementsByTagName('output');

    container.borderTopLeftRadius = out_range[0].value;
    container.borderTopRightRadius = out_range[1].value;
    container.borderBottomRightRadius = out_range[2].value;
    container.borderBottomLeftRadius = out_range[3].value;
}
* {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 12px;
}

.container {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(10, 1fr);
    margin: 10%;
    background-color: rgb(155, 151, 151);
}

.container__div--first {
    background-color: rgb(255, 0, 0);
    grid-column: 3 / span 4;
    grid-row: 3 / span 5;
    border: 2px solid rgb(0, 0, 0);
}

.container__div--tl {
    grid-column: 2 / span 1;
    grid-row: 2 / span 1;
    display: flex;
    flex-direction: row-reverse;
}

.container__div--tr {
    grid-column: 7 / span 1;
    grid-row: 2 / span 1;
    display: flex;
}

.container__div--br {
    grid-column: 7 / span 1;
    grid-row: 8 / span 1;
    display: flex;
}

.container__div--bl {
    grid-column: 2 / span 1;
    grid-row: 8 / span 1;
    display: flex;
    flex-direction: row-reverse;
}

output {
    padding: 10px;
}

button {
    cursor: pointer;
    grid-row: 1 / 1;
    grid-column: 8 / 9;
    box-shadow: -2px 2px 4px rgb(77, 72, 72);
}

button:hover {
    opacity: 0.9px;
}

button:active {
    transform: translate(-2px, 2px);
    box-shadow: 0px 0px 0px rgb(77, 72, 72);
}

input {
    cursor: pointer;
}

a {
    text-decoration: none;
    color: rgb(0, 0, 0);
}
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../normalize.css">
    <link rel="stylesheet" href="style.css">
    <title>Border-radius Previewer</title>
</head>
<body>
    
    <div class="container" id="div_container">
        <div class="container__div--first" id="div_container__modifiable">
            
        </div>
        <div class="container__div--tl">
            <input type="range" value="0" class="div__range" id="range_tl" list="tickmarks" onchange="document.getElementById('out_range_tl').value = value + '%'">
            <output id="out_range_tl" class="div_out" for="range_tl">0%</output>
        </div>
        <div class="container__div--tr">
            <input type="range" value="0" class="div__range" id="range_tr" list="tickmarks" onchange="document.getElementById('out_range_tr').value = value + '%'">
            <output id="out_range_tr" class="div_out" for="range_tr">0%</output>         
        </div>
        <div class="container__div--br">
            <input type="range" value="0" class="div__range" id="range_br" list="tickmarks" onchange="document.getElementById('out_range_br').value = value + '%'">
            <output id="out_range_br" class="div_out" for="range_br">0%</output>
        </div>
        <div class="container__div--bl">
            <input type="range" value="0" class="div__range" id="range_bl" list="tickmarks" onchange="document.getElementById('out_range_bl').value = value + '%'">
            <output id="out_range_bl" class="div_out" for="range_bl">0%</output>
            <datalist id="tickmarks">
                <option value="0"></option>
                <option value="10"></option>
                <option value="20"></option>
                <option value="30"></option>
                <option value="40"></option>
                <option value="50"></option>
                <option value="60"></option>
                <option value="70"></option>
                <option value="80"></option>
                <option value="90"></option>
                <option value="100"></option>
            </datalist>
        </div>
        <button id="btn_download"><a href="style.css" title="download css.txt" class="a_download">Download css code</a></button>
    </div>

    <script src="main.js"></script>
</body>
</html>

La cuestión es que al darle al botón para descargar el código me redirige al archivo para darle a "guardar como" y proceder a descargarlo, pero si yo modifico los border-radius, dichos cambios no se ven reflejados en el código css. Me gustaría saber como hacer para que se modifique o en su defecto, poder obtener el código resultante de los cambios de forma independiente del código original. Seguramente hay muchas cosas que se puedan mejorar, por eso estoy abierto a cualquier consejo/ayuda que me quieran dar.

4
  • 2
    No se modifica porque no interaccionas directamente con el stylesheet, sino con los propios valores del elemento. Ahora tendrías que crear un nuevo stylesheet volcando esos valores en él, y generar el enlace de descarga dinámicamente. Yo he estado haciendo pruebas y no tengo los conocimientos suficientes para poder darte una solución limpia y de calidad, pero seguro que este fiddle te ayuda a orientarte: jsfiddle.net/s5on5dau/1 ;)
    – Bettylex
    Commented el 3 sept. 2021 a las 1:33
  • Prueva esto y dime si es lo que quieres descargar: console.log( document.getElementsByTagName("style")[0].innerHTML);. Eso te retornará toda la hoja de stylo usada, ahora que tal si le concatenas el stylo del elemento ya modificado...innerHTML+="#div modificable{ border-top-left-radius:"+output.value+";border-.... Y haci hasta obtener todo el texto que deseas que el usuario descarge. Y por ultimo generas el archivo con ese css y lo pasas al href
    – DABL03
    Commented el 3 sept. 2021 a las 8:52
  • Pero no se si se puede usando el elemento link para obtener el contenido del archivo: `style.css" desde javascript.
    – DABL03
    Commented el 3 sept. 2021 a las 9:02
  • Descubri por experimentacion que puedes hacer esto: var link=document.getElementsByTagName("link"); console.log(link.sheet.cssRules[0].style), pero tendras que hacer un esfuerso por filtrar mucha cosas que no nos interesan. Y adicionalmente puedes ver cual link es que estas usando recorriendo la lista de elementos link con un bucle y un style=(link[i].getAttribute("href")==="style.css)?link[i]:style;`
    – DABL03
    Commented el 3 sept. 2021 a las 9:26

1 respuesta 1

1

El problema que veo es que no estas accediendo a el stylesheet ,te pongo un ejemplo: En tu función:

 function modifyBorderRadius() {
let container = document.getElementById('div_container__modifiable').style;
let out_range = document.getElementsByTagName('output');

container.borderTopLeftRadius = out_range[0].value;
container.borderTopRightRadius = out_range[1].value;
container.borderBottomRightRadius = out_range[2].value;
container.borderBottomLeftRadius = out_range[3].value;

}

Actualizas valores CSS pero no estas haciendo ningún cambio en ninguna hoja de estilo , no se queda guardado . Tendrías que acceder a la hoja de estilo , por ejemplo de esta manera:

 var style=document.getElementsByTagName("style")[0]

Y a partir de ahí ya podrás ver que los cambios se quedan guardados en la hoja de estilo .

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.