[Resuelto] ¿No me cambia el estilo JS?

Iniciado por SrTrp, 19 Enero 2020, 03:50 AM

0 Miembros y 1 Visitante están viendo este tema.

Imprimir
Ir Abajo Páginas1
Acciones del Usuario

SrTrp

19 Enero 2020, 03:50 AM Ultima modificación: 23 Febrero 2020, 00:01 AM por #!drvy
Que tal quiero cambiar el tamaño de un div mediante JS pero curiosamente realizo esto en una carpeta donde comienzo la maqueta del diseño y luego ya lo meto a una pagina.
desde el maqueteo si me cambiaba el tamaño pero cuando lo meti a la pagina ya no este es el código:
Código (html4strict) [Seleccionar]

<div id="world">

   <div class="credencialPos">
      <div class="fCuerpo" id="ficha">
   
   <div class="fBoxDatos" id="BoxD">
       <h1>US</h1>
       <div class="fBoxDatos1">
           <div class="fBoxDatos2">
               <p><strong>Nivel: </strong><?php echo $_SESSION['nivel']; ?></p>
               <p><strong>Exp: </strong><?php echo $_SESSION['exp']; ?>XP</p>
               <p><strong>Amigos: </strong>500</p>
               <p><strong>Respeto: </strong>100</p>
           </div>
           <div class="fBoxDatos3">
               <p><strong>Puntaje : </strong>1000</p>
               <p><strong>Nivel : </strong>100</p>
           </div>
       </div>



   </div>
   <div class="fBoxMedallas" id="BoxM">
       <img src="../Mesa/Imgs/Medallas/medalla1.png" width="100" height="100" />
   </div>

</div>

   </div>
 </div>


Ahora el de mi js
Código (javascript) [Seleccionar]

var p = false;
   var m = false;
   var DP = document.getElementById("BoxD");
   var DM = document.getElementById("BoxM");
   var ficha = document.getElementById("ficha");
   function abrirDP() {        
       if (p) {
           p = false;
           ficha.style.height = 420;
           DP.style.visibility = "hidden";
       } else {
           p = true;
           m = false;
           ficha.style.height = 580;
           DP.style.visibility = "visible";
           DM.style.visibility = "hidden";
       }


   }

   function abrirDM() {
       if (m) {
           m = false;
           ficha.style.height = 420;
           DM.style.visibility = "hidden";
       } else {
           p = false;
           m = true;
           ficha.style.height = 510;
           DP.style.visibility = "hidden";
           DM.style.visibility = "visible";
       }

   }

Si vuelve visible y lo oculta los DP y DM pero ficha no obtiene ningun cambio

SrTrp

#1
19 Enero 2020, 04:26 AM
Ya lo pude solucionar, pero aque se debe de que solo en lugar de usar
Código [Seleccionar]

ficha.style.height = 580;

use esto
Código [Seleccionar]

ficha.style.height = "580px";

si me funcionaba con el primero, sera por la extensión donde lo probe es html y como ahora estoy trabajando dentro de un php?

@XSStringManolo

#2
19 Enero 2020, 13:43 PM
Visibility solo afecta a textos y así.
Alterna entre display hidden y display block también.


Te recomiendo diseño responsive usando el viewport en lugar de px que se van a mostrar muy distintos dependiendo de cada pantalla.
Archivo html:
Código (html4strict) [Seleccionar]
<head>
 <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width, height=device-height, target-densitydpi=device-dpi">
</head>

<body>
 <img src="imagen.png" class="botonImagen">
</body>
   

Archivo CSS:
Código (css) [Seleccionar]

/* Por Defecto */
.botonImagen {
 width: 5.5vw;
}

/* Monitores alta resolución. */
@media (min-width: 1281px) {

 .botonImagen {
   width: 2.75vw;
 }

}

/* Resolución común para pcs y portátiles. */
@media (min-width: 1025px) and (max-width: 1280px) {

 .botonImagen {
   width: 2.25vw;
 }

}

/* Tablets Ipads y similares resoluciones en modo vertical. */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {

 .botonImagen {
   width: 5.5vw;
 }

}

/* Tablets Ipads y similares resoluciones en modo horizontal. */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

 .botonImagen {
   width: 2.25vw;
 }

}

/* Tables de baja resolución y Smartphones de alta resolución. Posición Horizontal */
@media (min-width: 481px) and (max-width: 767px) and (orientation: landscape) {

 .botonImagen {
   width: 2.25vw;
 }

}

/* Moviles Vertical */
@media (min-width: 320px) and (max-width: 480px) and (orientation: portrait) {
 
 .botonImagen {
   width: 5.5vw;
 }

}

Hay muchas otras formas de crear diseños adaptables a las pantallas.
vw viewportWidth es el % del ancho del viewport.

vh viewportHeight es el % del alto del viewport.

Si pones 100vw el elemento ocupara todo el espacio visible horizontalmente.

Ando haciendo un proyecto usando todos estos elementos. Puedes ver como no muestro de la misma forma la web en un smartphone o en un pc.
https://smlearningfullstack.000webhostapp.com/dhunter/indexBUENO.html

SrTrp

#3
19 Enero 2020, 21:57 PM
Muchisimas gracias  ;-) me servirá!
Imprimir
Ir Arriba Páginas1
Acciones del Usuario