Foros del Web » Programando para Internet » Javascript »

agregar y quitar archivos estilos css

Estas en el tema de agregar y quitar archivos estilos css en el foro de Javascript en Foros del Web. Hola a todos me encontre un codigo muy bueno que permite cargar rutas de css esta muy bien pero lo que quiero es modificarlo para ...
  #1 (permalink)  
Antiguo 19/04/2012, 11:34
Avatar de Melecio  
Fecha de Ingreso: julio-2011
Ubicación: Coahuila
Mensajes: 320
Antigüedad: 12 años, 9 meses
Puntos: 8
agregar y quitar archivos estilos css

Hola a todos me encontre un codigo muy bueno que permite cargar rutas de css

esta muy bien pero lo que quiero es modificarlo para agregarlos lo que ya esta perfecto pero tambien quiero quitarlos


CODIGO COOMPLETO

<!DOCTYPE html>
<!-- HTML5 is good! -->
<html lang="es">
<head>
<title>Ejemplo de carga dinámica de archivos CSS</title>
<script type="text/javascript">



function LoadCSS(nomarch) {
var e = document.getElementById(nomarch);
if (e == undefined) {
var cssLink=document.createElement("link");
cssLink.setAttribute("rel", "stylesheet");
cssLink.setAttribute("type", "text/css");
cssLink.setAttribute("href", nomarch+".css");
cssLink.setAttribute("id",nomarch);
document.getElementsByTagName("head")[0].appendChild(cssLink);
}
}


</script>

</head>
<body>
<p>Al hacer clic en el botón, se cargará dinámicamente un archivo CSS que le dará otro estilo a los elementos que aparecen más abajo</p>
<button type="button" onClick="LoadCSS('estilos1');">Cargar css1</button>
<button type="button" onClick="LoadCSS('estilos2');">Cargar css2</button>
<button type="button" onClick="LoadCSS('cuscosky');">Cargar css2</button>



<div id="ejemplo">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a aliquet dui. Nullam accumsan orci interdum urna dapibus dictum. Nam mattis egestas erat, eget egestas lacus
<span id="rojo">elementum eget</span>
. Integer tristique accumsan dui, sed aliquet nisi ornare ut. Nam hendrerit metus eget magna commodo condimentum. In velit metus, commodo ac adipiscing at, congue quis orci. Vestibulum sagittis scelerisque consequat. Sed sollicitudin hendrerit imperdiet. Mauris ut augue dolor, id laoreet quam.
<b>Class</b>
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur vitae augue eu arcu blandit condimentum. Curabitur accumsan, nisl sed faucibus fringilla, elit sapien elementum magna, tempor vehicula enim felis vel elit. Pellentesque ultricies bibendum ultricies. Vivamus at libero sem, ut feugiat justo.
</p>
<ul class="lista">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
<table width="468" summary="Tabla de ejemplo" >
<thead>
<tr>
<th width="175">NUMERO DE PARTE</th>
<th width="186">CANTIDAD ENTREGADA</th>
</tr>
</thead>
<tbody >
<tr >
<th> <div align="center">
<input name="txtnumpartrecibido" type="text" class="TEXTBOX" id="txtnumpartrecibido" size="10" />
</div></th>
<th><div align="center">
<input name="txt_cantidad_recibida" type="text" class="TEXTBOX" id="txt_cantidad_recibida" size="10" />
</div></th>
<td><label>
<input name="button2" type="button" class="BTN" id="button2" value="RECIBIR" onclick="ADDRECIBIDOACETONA()"/>
</label></td>
</tr>
</tbody>
</table>
</body>
</html>










EXPLICACION:

function LoadCSS(nomarch) {
var e = document.getElementById(nomarch);
if (e == undefined) {//AQUI ESPECIFICA QUE SI NO EXISTE EL ID SE CREARA

var cssLink=document.createElement("link");
cssLink.setAttribute("rel", "stylesheet");
cssLink.setAttribute("type", "text/css");
cssLink.setAttribute("href", nomarch+".css");
cssLink.setAttribute("id",nomarch);
document.getElementsByTagName("head")[0].appendChild(cssLink);
}else{
//AQUI QUISIERA ELIMINAR EL CODIGO POR SU ID DE EL ESTILO CSS

}


}
  #2 (permalink)  
Antiguo 19/04/2012, 12:06
Avatar de Melecio  
Fecha de Ingreso: julio-2011
Ubicación: Coahuila
Mensajes: 320
Antigüedad: 12 años, 9 meses
Puntos: 8
Respuesta: agregar y quitar archivos estilos css

intente con esto


var d = document.getElementsByTagName("head");

var olddiv = document.getElementById('cuscosky');

d.removeChild(olddiv);


pero no me funciono
  #3 (permalink)  
Antiguo 19/04/2012, 12:22
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 10 meses
Puntos: 1567
Respuesta: agregar y quitar archivos estilos css

Es de suponer que tu página tiene un estilo predeterminado, o por defecto, porque no entonces crear un botón que cargue ese estilo?

Yo tengo esto hecho con jQuery
http://foros.emprear.com/jquerye/styleswitcher/
quizás te interese

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #4 (permalink)  
Antiguo 19/04/2012, 12:32
Avatar de Melecio  
Fecha de Ingreso: julio-2011
Ubicación: Coahuila
Mensajes: 320
Antigüedad: 12 años, 9 meses
Puntos: 8
Respuesta: agregar y quitar archivos estilos css

Gracias esta bueno.

pero es igual a lo que ya tengo

agregar la ruta del css esta bien eso lo quiero dejar como esta

pero tambien asi como se crea esta ruta a el estilo me gutaria poder eliminarlo

gracias.
  #5 (permalink)  
Antiguo 19/04/2012, 12:45
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 10 meses
Puntos: 1567
Respuesta: agregar y quitar archivos estilos css

Probá con

Código Javascript:
Ver original
  1. hoja_estilos = document.getElementById(styleSheetId)
  2. hoja-estilos.parentNode.removeChild(sheet)

Asumiendo que tus estilos tienen un id
Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #6 (permalink)  
Antiguo 19/04/2012, 13:46
Avatar de Melecio  
Fecha de Ingreso: julio-2011
Ubicación: Coahuila
Mensajes: 320
Antigüedad: 12 años, 9 meses
Puntos: 8
Respuesta: agregar y quitar archivos estilos css

Gracias
<link id="idstylo" href="estilos1.css" rel="stylesheet" type="text/css">

hoja_estilos = document.getElementById('idstylo')
hoja_estilos.parentNode.removeChild("AQY que va, es el nombre de el estilo")

----------------------------------------

este codigo es el que me funciono

var read=document.getElementById('idstylo').removeAttr ibute("rel",0);
var read=document.getElementById('idstylo').removeAttr ibute("type",0);
var read=document.getElementById('idstylo').removeAttr ibute("href",0);
var read=document.getElementById('idstylo').removeAttr ibute("id",0);

pero me sige dejando esto <link > en vez de esto <link id="idstylo" href="estilos1.css" rel="stylesheet" type="text/css"> que es lo que queria quitar pero como puedo eliminarlo todo esa es mi duda
  #7 (permalink)  
Antiguo 19/04/2012, 14:34
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: agregar y quitar archivos estilos css

has estado cerca. qué tal así??
Cita:
document.getElementsByTagName("head")[0].removeChild(document.getElementById(nomarch));
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #8 (permalink)  
Antiguo 19/04/2012, 15:40
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 10 meses
Puntos: 1567
Respuesta: agregar y quitar archivos estilos css

Finalmente me quedó asi
todo en una función
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <title>Cambiar Estilos</title>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6. <script type="text/javascript">
  7. //<![CDATA[
  8.  
  9. function cambiaEstilos(nombre,accion){
  10.  
  11. if(accion == 'a'){ // agregar estilos
  12. var elCss  = document.createElement('link');
  13. elCss.rel = 'stylesheet'
  14. elCss.type = 'text/css';
  15. elCss.href = nombre + '.css';
  16. document.getElementsByTagName('head')[0].appendChild(elCss);
  17. }else if(accion == 'r'){ //remover estilos
  18. var losEstilos=document.getElementsByTagName('link')
  19. for (var i=losEstilos.length; i>=0; i--){
  20. if (losEstilos[i] && losEstilos[i].getAttribute('href')!=null && losEstilos[i].getAttribute('href').indexOf(nombre+'.css')!=-1)
  21. losEstilos[i].parentNode.removeChild(losEstilos[i])
  22. }
  23. }
  24.  
  25. }
  26.  
  27. //]]>
  28. </head>
  29. <h1>Hola</h1>
  30. <!-- parámetros para la función, nombre del archivo css sin extensión, a para agregar, r para remover -->
  31. <button onclick="cambiaEstilos('original','a');">Agregar estilo original.css</button>
  32. <button onclick="cambiaEstilos('original','r');">Eliminar estilo original.css</button>
  33. <button onclick="cambiaEstilos('verde','a');">Agregar estilo verde.css</button>
  34. <button onclick="cambiaEstilos('verde','r');">Eliminar estilo verde.css</button>
  35. </body>
  36. </html>

Testeado en FF / IE9-8-7 / Opera /Chrome
Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #9 (permalink)  
Antiguo 20/04/2012, 07:31
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: agregar y quitar archivos estilos css

anoche me cegó la idea de Melecio de remover el include.

emprear, permiteme usar tu código. se trata de sobrescribir el atributo href del include una vez creado
Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cambiar Estilos</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
window['bol'] = 0;
function cambiaEstilos(nombre){
window['bol'] = window['bol'] == 0 ? 1 : 0;

if(window['bol']){ // agregar estilos
var elCss = document.createElement('link');
elCss.rel = 'stylesheet'
elCss.type = 'text/css';
elCss.href = nombre + '.css';
document.getElementsByTagName('head')[0].appendChild(elCss);
}else { //remover estilos
document.getElementsByTagName('head')[0].getElementsByTagName('link')[0].href = nombre + '.css';
window['bol'] = 1;
}
}

//]]>
</script>
</head>
<body>
<h1>Hola</h1>
<!-- parámetros para la función, nombre del archivo css sin extensión, a para agregar, r para remover -->
<button onclick="cambiaEstilos('original');">Agregar estilo original.css</button>
<button onclick="cambiaEstilos('verde');">Agregar estilo verde.css</button>
</body>
</html>
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #10 (permalink)  
Antiguo 20/04/2012, 08:49
Avatar de Melecio  
Fecha de Ingreso: julio-2011
Ubicación: Coahuila
Mensajes: 320
Antigüedad: 12 años, 9 meses
Puntos: 8
Respuesta: agregar y quitar archivos estilos css

Les agradesco a todos su ayuda asi quedo el ejemplo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cambiar Estilos</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">

function AGREGARYQUITARCSS(CSS) {
var e = document.getElementById(CSS);
if (e == undefined) {
//--cargar css
var CARGAR = document.createElement('link');
CARGAR.rel = 'stylesheet'
CARGAR.type = 'text/css';
CARGAR.href = CSS + '.css';
CARGAR.id = CSS;

document.getElementsByTagName('head')[0].appendChild(CARGAR);
//--cargar css
}else{

//---ELIMINAR CSS
var ESTILOCSS = document.getElementsByTagName('link')
for (var i=ESTILOCSS.length; i>=0; i--){
if (ESTILOCSS[i] && ESTILOCSS[i].getAttribute('href')!=null && ESTILOCSS[i].getAttribute('href').indexOf(CSS+'.css')!=-1)
ESTILOCSS[i].parentNode.removeChild(ESTILOCSS[i])
}
//---ELIMINAR CSS

}
}


</script>


</head>
<body>
<h1 class="original">Hola</h1>

<button onclick="AGREGARYQUITARCSS('original');">Agregar estilo original.css</button>

<button onclick="AGREGARYQUITARCSS('verde');">Agregar estilo verde.css</button>


</body>
</html>


muchas gracias.
  #11 (permalink)  
Antiguo 20/04/2012, 14:14
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: agregar y quitar archivos estilos css

si estás contento con ello, bien. pero quizás es que no has mirado la consola.
por lo que he entendido, me da la sensación que hay un momento en que están los dos includes y habrá otro momento en el ningún include (uno de ellos) afecte al elemento

por otro lado
Cita:
var e = document.getElementById(CSS);
aunque no sea un error de sintaxis, no quiere decir que sea una lógica correcto

te recomiendo que uses o el código propuesto por emprear o el mio
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #12 (permalink)  
Antiguo 20/04/2012, 19:25
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 10 meses
Puntos: 1567
Respuesta: agregar y quitar archivos estilos css

Bueno, probé la ultima script de @Melecio, y funciona bien, de todas maneras al hacer la alternancia desde un mismo botón, creo que se le pueden hacer unas mejoras, además le hice un agregado extra, un botón que remueva todos los estilos, optimizaciones, bienvenidas


Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <title>Cambiar Estilos</title>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6. <style type="text/css">
  7. /*<![CDATA[*/
  8.  
  9. div.test{
  10. height: 120px;
  11. -webkit-box-sizing: border-box;
  12. -moz-box-sizing: border-box;  
  13. box-sizing: border-box;
  14. padding:0;
  15. margin: 30px;
  16. margin-bottom: 5px;
  17. }
  18.  
  19. h1{
  20. height: 60px;
  21. padding: 0;
  22. margin: 0;
  23. }
  24. div.botones{
  25. padding:0;
  26. margin: 30px;
  27. }
  28.  
  29. button{
  30. width: 250px;
  31. background-color:#9C8D7A;
  32. margin-bottom: 5px;
  33. outline: 0;
  34. }
  35. /*]]>*/
  36. <script type="text/javascript">
  37. //<![CDATA[
  38. var todos = new Array();
  39. function cambiaEstilos(nombre){
  40. var losEstilos=document.getElementsByTagName('link');
  41. if(todos.indexOf(nombre) == -1){
  42. var elCss  = document.createElement('link');
  43. elCss.rel = 'stylesheet'
  44. elCss.type = 'text/css';
  45. elCss.href = nombre + '.css';
  46. document.getElementsByTagName('head')[0].appendChild(elCss);
  47. todos.push(nombre);
  48. document.getElementById(nombre).innerHTML = "Eliminar estilo " + nombre + ".css";
  49. }else{
  50. todos.splice(todos.indexOf(nombre),1);
  51. document.getElementById(nombre).innerHTML = "Agregar estilo " + nombre + ".css";
  52. borrar(nombre);
  53. }
  54. }
  55.  
  56. function borrar(nombre){
  57. var losEstilos=document.getElementsByTagName('link');
  58. for (var i=losEstilos.length; i>=0; i--){
  59. if (losEstilos[i] && losEstilos[i].getAttribute('href')!=null && losEstilos[i].getAttribute('href').indexOf(nombre+'.css')!=-1){
  60. losEstilos[i].parentNode.removeChild(losEstilos[i]);
  61. }
  62. }
  63. }
  64.  
  65. function borraTodos(){
  66. for (var i=0; i < todos.length; i++ ){
  67. var todos_estilos = todos[i];
  68. borrar(todos_estilos);
  69. document.getElementById(todos_estilos).innerHTML = "Agregar estilo " + todos_estilos + ".css";
  70. }
  71. todos = new Array();
  72. }
  73.  
  74. //]]>
  75. </head>
  76. <div class="test">
  77. <h1>Hola</h1>
  78. </div>
  79. <div class="botones">
  80. <!-- parámetros para la función, nombre del archivo css sin extensión -->
  81. <button id="original" onclick="cambiaEstilos('original');">Agregar estilo original.css</button><br />
  82. <button id="background" onclick="cambiaEstilos('background');">Agregar estilo background.css</button><br />
  83. <button id="verde" onclick="cambiaEstilos('verde');">Agregar estilo verde.css</button><br /><br />
  84. <button onclick="borraTodos();">Eliminar todos los estilos</button>
  85. </div>
  86. </body>
  87. </html>

Por si acaso algún distraido, hay que crear los tres archivos de estilos (original.css, verde.css, background.css

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #13 (permalink)  
Antiguo 23/04/2012, 05:00
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: agregar y quitar archivos estilos css

disiento contigo.

cuando leí el código mentalmente me pareció que había un problema, que no afecta al proceso, y un error. primero voy con el error
Cita:
Iniciado por IsaBelM Ver Mensaje
habrá otro momento en el ningún include (uno de ellos) afecte al elemento
no existe tal error arreglo a la conducta que se quiere

ahora el problema
Cita:
Iniciado por IsaBelM Ver Mensaje
hay un momento en que están los dos includes
bien, aquí hay que hablar de ordenar css por orden especificado
http://html.conclase.net/w3c/css1-es...den-de-cascada
¿qué quire decir esto? pues, que a igual valor de las reglas, la última será la preponderante.
como se leen de arriba abajo y como tienen el mismo valor, la última será la que establezca el color definitivo. por lo tanto si tenemos 1, 2, 3, n includes con la mismo selector y regla, primero se establecerá el color de la primera regla, después de la 2ª y finalmente de la 3ª
Cita:
1º include/selector/regla (color) ----> red
2º include/selector/regla (color) ----> blue
3º include/selector/regla (color) ----> green
obtendremos como color "green". para comprobar este comportamiento, en lugar de usar appendChild(), usemos insertBefore() y de inicio tengamos cargado un include
Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cambiar Estilos</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/

div.test{
height: 120px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding:0;
margin: 30px;
margin-bottom: 5px;
}

h1{
height: 60px;
padding: 0;
margin: 0;
}
div.botones{
padding:0;
margin: 30px;
}

button{
width: 250px;
background-color:#9C8D7A;
margin-bottom: 5px;
outline: 0;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
function cambiaEstilos(nombre){
var elCss = document.createElement('link');
elCss.rel = 'stylesheet'
elCss.type = 'text/css';
elCss.href = nombre + '.css';
document.getElementsByTagName('head')[0].insertBefore(elCss, document.getElementsByTagName('head')[0].getElementsByTagName('link')[0]);
document.getElementById(nombre).innerHTML = "Eliminar estilo " + nombre + ".css";
}


//]]>
</script>
<link rel="stylesheet" type="text/css" href="original.css">
</head>
<body>
<div class="test">
<h1>Hola</h1>
</div>
<div class="botones">
<!-- parámetros para la función, nombre del archivo css sin extensión -->
<button id="original" onclick="cambiaEstilos('original');">Agregar estilo original.css</button><br />
<button id="background" onclick="cambiaEstilos('background');">Agregar estilo background.css</button><br />
<button id="verde" onclick="cambiaEstilos('verde');">Agregar estilo verde.css</button><br /><br />
<button onclick="borraTodos();">Eliminar todos los estilos</button>
</div>
</body>
</html>
si el include de inicio establece el color (red) en el texto y ahora insertamos dinámicamente un nuevo include (blue), el texto se mantendrá en color red
Cita:
include dinámico (color) ----> blue
include de inicio (color) ----> red
de aquí que la manera mas optimizada es reasignar el valor de href como ya mencioné en el post #9


ya que se habló de optimización, hagamos algunos cambios para evitar el uso de matrices, recursividad, etc... el punto está en establecer el atributo id a cada include. también se le agregará el atributo "estado" a cada control para saber que se ha de hacer cuando la función cambiaEstilos() sea invocada
Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cambiar Estilos</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/

div.test{
height: 120px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding:0;
margin: 30px;
margin-bottom: 5px;
}

h1{
height: 60px;
padding: 0;
margin: 0;
}
div.botones{
padding:0;
margin: 30px;
}

button{
width: 250px;
background-color:#9C8D7A;
margin-bottom: 5px;
outline: 0;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
function cambiaEstilos(nombre){
if (nombre.attributes.estado.value == 0) {
document.getElementsByTagName('head')[0].removeChild(document.getElementById('css-'+nombre.id));
document.getElementById(nombre.id).innerHTML = "Agregar estilo " + nombre.id + ".css";
nombre.setAttribute('estado', 1);
} else {
var elCss = document.createElement('link');
elCss.rel = 'stylesheet'
elCss.type = 'text/css';
elCss.href = nombre.id + '.css';
elCss.id= 'css-'+nombre.id;
document.getElementsByTagName('head')[0].appendChild(elCss);
document.getElementById(nombre.id).innerHTML = "Eliminar estilo " + nombre.id + ".css";
nombre.setAttribute('estado', 0);
}
}

function borraTodos(){
var losEstilos= document.getElementsByTagName('head')[0].getElementsByTagName('link');
for (var i = 0, ink = losEstilos.length; i < ink; i++){
var id_include = losEstilos[0].id, id_control = id_include.split('-')[1];
document.getElementById(id_control).innerHTML = "Agregar estilo " + id_control + ".css";
document.getElementById(id_control).setAttribute(' estado', 1);
document.getElementsByTagName('head')[0].removeChild(losEstilos[0]);
}
}

//]]>
</script>
</head>
<body>
<div class="test">
<h1>Hola</h1>
</div>
<div class="botones">
<!-- parámetros para la función, nombre del archivo css sin extensión -->
<button id="original" estado="1" onclick="cambiaEstilos(this);">Agregar estilo original.css</button><br />
<button id="background" estado="1" onclick="cambiaEstilos(this);">Agregar estilo background.css</button><br />
<button id="verde" estado="1" onclick="cambiaEstilos(this);">Agregar estilo verde.css</button><br /><br />
<button onclick="borraTodos();">Eliminar todos los estilos</button>
</div>
</body>
</html>
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}

Última edición por IsaBelM; 23/04/2012 a las 05:10
  #14 (permalink)  
Antiguo 23/04/2012, 06:39
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 10 meses
Puntos: 1567
Respuesta: agregar y quitar archivos estilos css

Buena observación con lo del insertBefore para que el ultimo estilo cargado sobreescriba el valor de una propiedad comun para un selector, el detalle es que de esta manera aparecerán botones con la leyenda "eliminar...." cuando visualmente en la página ese estilo no va a ser apreciado
Agrego verde
Agrego azul
Se ve azul , pero verde todavia aparece como activo.
Supongo que lo más practico entonces es hacer uno de los llamados styleswitcher(hay uno bastante conocido y bien documentado en http://www.alistapart.com/articles/alternate/ ) tradicionales donde simplemente una hoja conteniendo todos los estilos reemplaza a otra.
Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #15 (permalink)  
Antiguo 23/04/2012, 14:34
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: agregar y quitar archivos estilos css

quizás no me expresé bien. lo de insertBefore() no era un caso para llevar a la practica, era para ejemplificar la explicación

en cuanto a styleswitcher, he de reconocer que no lo conocía, me parece algo farragoso, aun elimininando la creación y lecctura de cookies. que pueden o no estar activadas. el caso es que continuamos viendonos forzados a cargar todos los includes. por lo tanto continuo quedandome con sobrescribir el atributo href. que es un código que ocupa una sola línea

te das cuenta que estamos debatiendo sobre la manera mas practica de realizar este efecto, que probablemente nunca usaremos, y el autor del tema ya se ha desentendido??
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}

Etiquetas: css, estilos, html, input
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:07.