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.
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 hrefvar 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 unstyle=(link[i].getAttribute("href")==="style.css
)?link[i]:style;`