[SOLUCIONADO] HTML dinámico mediante jQuery

alvaaz · #1 (**permalink**) 06/03/2015, 12:02

Hola comunidad,

Mediante la etiqueta SELECT de una página de marcado HTML 5, quiero agregar distintas hojas de estilos a la plantilla principal para que cambie según el tamaño de dispositivo. Tengo una para PC en alta definición, tablet, móvil y PC normal.

Código HTML:

Ver original<head>
    <meta charset="UTF-8">
    <title>Hola</title>
    <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript">
            $(document).ready(inicio)
            function inicio(){
                $("select").change(cambiacss);
            }
            function cambiacss(){
                var plantilla = $("select").attr("value");
                $("plantilla").html('<link rel=Stylesheet href="css/'+plantilla+'.css" type="text/css">')
            }
    </script>
    <link rel="Stylesheet" href="css/base.css" type="text/css">
    <plantilla>
 
    </plantilla>
</head>

Con el código JavaScript siguiente pretendo agregar una línea en la etiqueta PLANTILLA, de esta manera se le agregarán más propiedades.

Código Javascript:

Ver original<script type="text/javascript">
    $(document).ready(inicio)
    function inicio(){
        $("select").change(cambiacss);
    }
    function cambiacss(){
        var plantilla = $("select").attr("value");
        $("plantilla").html('<link rel=Stylesheet href="css/'+plantilla+'.css" type="text/css">')
    }
</script>

Pero no entiendo porque no funciona.

elporfirio · #2 (**permalink**) 06/03/2015, 16:32

No funciona por que supones que al colocar el link, la pagina vuelve a buscar todo lo que el DOM requiere, pero esto solo ocurre 1 vez.

utiliza algo como

Código Javascript:

Ver original$('link[href="css/'+plantillaoriginal+'.css"]').attr({'href' : 'css/'+plantillanueva+'.css});

plantilla original, es con la que inicia por default
plantilla nueva, es la que recien solicitas...

recuerda cambiar la variable var plantillaoriginal = plantillanueva, para el 2do cambio en adelante

Alexhg42 · #3 (**permalink**) 07/03/2015, 20:03

pienso que seria mas conveniente el cambiar el className de tu body, en tu select pones que eligiedo la opcion cambie por ese el class de tu body y el css lo identifica y lo cambiaria todo en el momento sin tener que actualizar la pagina. con eso te ahorrarias tiempo de carga y gastaria menos recursos y menos espacio.

alvaaz · #4 (**permalink**) 09/03/2015, 22:51

Gracias por la ayuda!