Foros del Web - Ver Mensaje Individual

IsaBelM · #13 (**permalink**) 23/04/2012, 05:00

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

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

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">

<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">

<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>