JavaScript - Modificar ancho de un div con javascript ....ayuda

 
Vista:
Imágen de perfil de Gavriel
Val: 4
Ha aumentado su posición en 28 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Modificar ancho de un div con javascript ....ayuda

Publicado por Gavriel (21 intervenciones) el 10/06/2017 19:19:27
hola amigos
El dìa de hoy tengo una duda ....
_Quiero modificar el ancho (width) de un div , al presionar un botòn . Consegui un còdigo q a primera visa pense q funcionaria , pero no funciona ...
Alguien q me de alguna ayuda
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script language="javascript">
function modificar() {
if (document.getElementById("modificable").style.width == 200) {
document.getElementById("modificable").style.width = 100;
document.getElementById("modificable").style.height = 100;
} else {
document.getElementById("modificable").style.width = 200;
document.getElementById("modificable").style.height = 200;
}
}
</script>
</head>
 
<body>
<div id="modificable" style="height:200;width:200;background-color:blue">
...
</div>
<input type=button value=pinchar onclick="modificar()"></input>
</body>
</html>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de kip
Val: 553
Bronce
Ha aumentado 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

Modificar ancho de un div con javascript ....ayuda

Publicado por kip (107 intervenciones) el 10/06/2017 19:29:50
Hola, lo que sucede es que debes recordar que la propiedad esta definida, ademas de un numero entero, con su unidad de medida en este caso 'px', entonces cuando quieras modificar o evaluar siempre debes hacerlo tomando en cuenta aquello, sera un string al final '80px' por ejemplo.

Tu codigo quedaria asi:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script language="javascript">
function modificar() {
if (document.getElementById("modificable").style.width == '200px') {
document.getElementById("modificable").style.width = '100px';
document.getElementById("modificable").style.height = '100px';
} else {
document.getElementById("modificable").style.width = '200px';
document.getElementById("modificable").style.height = '200px';
}
}
</script>
</head>
 
<body>
<div id="modificable" style="height:200px;width:200px;background-color:blue">
...
</div>
<input type=button value=pinchar onclick="modificar()"></input>
</body>
</html>

Ahora funciona no ?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
Imágen de perfil de Gavriel
Val: 4
Ha aumentado su posición en 28 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Modificar ancho de un div con javascript ....ayuda

Publicado por Gavriel (21 intervenciones) el 11/06/2017 00:47:15
genial kip ahora si funciona correcto .gracias x la ayuda
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Modificar ancho de un div con javascript ....ayuda

Publicado por Juan Bosco (5 intervenciones) el 19/02/2018 20:37:43
Que tal buenos días!!

Probé tu ejemplo tal cual y efectivamente funciona perfecto; pero al intentar hacerlo con la propiedad "margin-left", ya no funcionó, está limitada a width o height??

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script language="javascript">
function modificar() {
alert('hola');
if (document.getElementById("modificable").style.margin-left == '200px') {
document.getElementById("modificable").style.margin-left = '100px';
} else {
document.getElementById("modificable").style.margin-left = '200px';
}
}
</script>
</head>
 
<body>
<div id="modificable" style="height:200px;width:200px;margin-left:200px;background-color:blue">
...
</div>
<input type=button value=pinchar onclick="modificar()"></input>
</body>
</html>


Saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de abzerox
Val: 477
Bronce
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Modificar ancho de un div con javascript ....ayuda

Publicado por abzerox (130 intervenciones) el 20/02/2018 00:18:39
Hola, para este tipo de propiedades debes usar lowerCamelCase, así:

1
document.getElementById("modificable").style.marginLeft = '200px';

Otros ejemplos:
background-color -> backgroundColor
border-color -> borderColor
font-size -> fontSize
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar