[SOLUCIONADO] Cambiar CSS mediante JavaScript

ragonzao · #1 (**permalink**) 12/07/2013, 01:49

Muy buenas;
Tengo un problema y es que no me funciona el siguiente código:
- Tiene que capturar el value del select e insertar dentro de las etiquetas plantilla "<plantilla></plantilla>" el link al archivo css que le corresponde segun la opción seleccionada.
- Una ayuda??? ya que nose porque no me funciona

Código HTML:

Ver original<meta charset="UTF-8">
<!-- Scripts -->
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(inicio)
        function inicio(){
            $("select").change(cambiacss)
 
        }
        function cambiacss(valor){
            var plantilla =$("select").attr("value");
            alert(plantilla);
            $("plantilla").html('<link rel="stylesheet" href="css/'+plantilla+'.css">')
        }
    </script>
<!-- Estilos -->
    <link rel="stylesheet" href="css/base.css">
    <plantilla>
        
    </plantilla>
 
</head>
 
<body>
    <select name="plantilla">
        <option value="">Selecciona una plantilla</option>
        <option value="pc1">Plantilla para PC</option>
        <option value="pchd">Plantilla para PC HD</option>
        <option value="tablet">Plantilla para Tablet</option>
        <option value="movil">Plantilla para Movil</option>
    </select>
    <hr>
<div id="contenedor">
<!-- Cabecera -->
    <header>

pzin · #2 (**permalink**) 12/07/2013, 01:54

No es un tema de CSS, sino de JavaScript. Te lo muevo a dicho foro. Y usa highlight o code cuando publiques código.

ragonzao · #3 (**permalink**) 12/07/2013, 02:22

vale no sabia, gracias

comablck · #4 (**permalink**) 12/07/2013, 22:32

lo que tenes que cambiar es la parte donde llamas el value del option del select, asi..

Cita:

var plantilla = $("select").val();

otra cosa q te recomiendo es que hagas tus funciones aparte y llames tu libreria en el html, por ejemplo..

Cita:

asi tenes un html mas limpio y el document.ready igual lo podes hacer desde tu js

ragonzao · #5 (**permalink**) 21/07/2013, 04:27

Muchas gracias;
Solucionado!!!!!
Tendré en cuenta tu recomendación de limpiar el codigo

vesper_metal90 · #6 (**permalink**) 25/07/2013, 01:23

Yo lo hice asi

Código HTML:

Ver original<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $("select#tipoCss").change(function(){
          cambiar();
        });        
        function cambiar(){
          var plantilla = $("select#tipoCss").val();
          if(plantilla == ""){
            $("select#tipoCss option:selected");
            return false;
          }else{
            $("plantilla").html("<link rel=\"stylesheet\" href=\"css/"+plantilla+".css\"/>");
          }
        }
      });
     
    </script>
    <link rel="stylesheet" href="css/base.css"/>
  </head>
  <body>
  <plantilla>
  </plantilla>
  <select id="tipoCss" name="plantilla">
    <option value="">Selecciona una plantilla</option>
    <option value="pc">Plantilla para PC</option>
    <option value="smartPhone">Plantilla smartPhone</option>
    <option value="pchd">Plantilla alta definicion</option>
    <option value="tablet">Plantilla para tableta digital</option>
  </select>
  <hr>
  <div id="contenedors">
    <header>
      <div id="titulo">
        <div id="logo"> 
        </div>
        <h1>Edgar de Jesus Mendoza Ortegon</h1>
        <h2>Eslogan de la web</h2>
      </div>
      <nav>
        <ul>
          <li>
            <a href="index.php">Inicio</a>
          </li>
          <li>
            <a href="blog.php">Blog</a>
          </li>
          <li>
            <a href="productos.php">Productos</a>
          </li>
          <li>
            <a href="contacto.php">Contacto</a>
          </li>
        </ul>
      </nav>
      Cabecera
    </header>
    <section>
      Contenido
      <div id="banner">
        <h3>Titulo del Destacado</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut lectus eu massa imperdiet tincidunt. Praesent tincidunt aliquam mauris, non pretium est malesuada in. Aliquam orci tortor, facilisis ac arcu non, euismod mollis nulla. Duis accumsan pulvinar porttitor. Donec erat eros, dapibus ac sem sit amet, tempus ultricies urna. Ut pretium lorem id magna pharetra, sit amet faucibus sem pulvinar. Donec placerat, nulla sed ultricies vestibulum, justo dolor tincidunt sem, vel venenatis dui lacus at tortor. Fusce scelerisque molestie pharetra. Fusce bibendum nibh id augue euismod congue.</p>
 
      </div>
      <article>
        <div class="imagendestacado" id="img1"></div>
        <h3>Titulo del Destacado</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut lectus eu massa imperdiet tincidunt. Praesent tincidunt aliquam mauris, non pretium est malesuada in. Aliquam orci tortor, facilisis ac arcu non, euismod mollis nulla. Duis accumsan pulvinar porttitor. Donec erat eros, dapibus ac sem sit amet, tempus ultricies urna. Ut pretium lorem id magna pharetra, sit amet faucibus sem pulvinar. Donec placerat, nulla sed ultricies vestibulum, justo dolor tincidunt sem, vel venenatis dui lacus at tortor. Fusce scelerisque molestie pharetra. Fusce bibendum nibh id augue euismod congue.</p>
      </article>
      <article>
        <h3>Titulo del Destacado</h3>
        <div class="imagendestacado" id="img2"></div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut lectus eu massa imperdiet tincidunt. Praesent tincidunt aliquam mauris, non pretium est malesuada in. Aliquam orci tortor, facilisis ac arcu non, euismod mollis nulla. Duis accumsan pulvinar porttitor. Donec erat eros, dapibus ac sem sit amet, tempus ultricies urna. Ut pretium lorem id magna pharetra, sit amet faucibus sem pulvinar. Donec placerat, nulla sed ultricies vestibulum, justo dolor tincidunt sem, vel venenatis dui lacus at tortor. Fusce scelerisque molestie pharetra. Fusce bibendum nibh id augue euismod congue.</p>
      </article>
      <article>
        <h3>Titulo del Destacado</h3>
        <div class="imagendestacado" id="img3"></div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut lectus eu massa imperdiet tincidunt. Praesent tincidunt aliquam mauris, non pretium est malesuada in. Aliquam orci tortor, facilisis ac arcu non, euismod mollis nulla. Duis accumsan pulvinar porttitor. Donec erat eros, dapibus ac sem sit amet, tempus ultricies urna. Ut pretium lorem id magna pharetra, sit amet faucibus sem pulvinar. Donec placerat, nulla sed ultricies vestibulum, justo dolor tincidunt sem, vel venenatis dui lacus at tortor. Fusce scelerisque molestie pharetra. Fusce bibendum nibh id augue euismod congue.</p>
      </article>
    </section>
    <footer>
      <h6>(c) 2013 Edgar de jesus Mendoza Ortegon</h6>
    </footer>
  </div>
</body>
</html>