1

Estoy intentado cambiar las dimensiones de un div modificando el css del mismo mediante el modelo DOM de JavaScript.

var mi_div = document.getElementById("prueba");
var get_width, get_height;
get_width = mi_div.offsetWidth;
get_height = mi_div.offsetHeight;

function mas_5_width(){
   mi_div.style.Width = get_width+5;
}

function menos_5_width(){
    mi_div.style.Width = get_width-5;
}

function mas_5_height(){
    mi_div.style.Heigth = get_height +5;
}

function menos_5_height(){
    mi_div.style.Heigth = get_height - 5;
}
*{
    margin:3px 5px;
    background-color: green;
}
.cabecera{
    border:solid black;
    font-size: 30px;
    text-align: center;
    padding:15px;
    background-color: #20BE84;          
}

button{

    background-color: #E00B38;
    border: solid black;
}
button:hover{

    background-color: #FFCB18;
    border: solid black;

}
.prueba{
    border: solid;
    width: 170px;
    height: 180px;  

}
.prueba, .prueba p{
    background-color: pink;
}
<div class="cabecera" >
    Cambiando dimension de los div
</div>

<div>
    <button onclick="return mas_5_width()">Width +5</button>
    <button>Width -5</button>
    <br>
    <button>Height +5</button>
    <button>Height -5</button>
</div>

<div class="prueba" id="prueba">
    Contenedor de prueba
</div>

4 respuestas 4

2

Dos cosas importantes para que su código funcione.

  • Width es incorrecto , las propiedades deben ir en minúsculas. width
  • La propiedad no solo acepta valores numéricos si no también debe especificar el tipo de medida (px,em,etc)
  • Además tener en cuenta que para modificar los valores en cada click ,debe obtener el ancho actual del elemento dentro de la función.
  • Una consideración importante es que si desea disminuir el ancho del elemento debería especificar el tamaño del border es decir border: 1px solid ; o el que desea si no podría tener problemas o en su defecto añadir la propiedad box-sizing Una propiedad muy importante para cambiar el modelo de caja

var mi_div = document.getElementById("prueba");
function mas_5_width(){
  const get_width = mi_div.offsetWidth;
  mi_div.style.width  = get_width+5 +"px";
}

function menos_5_width(){
  const get_width = mi_div.offsetWidth;
  mi_div.style.width = get_width-5 +"px";
}
.prueba{
  border: 1px solid;
  width: 170px;
  height: 180px;
}
<button onclick="return mas_5_width()">Width +5</button>
<button onclick="menos_5_width()">Width -5</button>
<div class="prueba" id="prueba">
   Contenedor de prueba
</div>

5
  • estupendo, una ultima cosa, como es para restar, puede parecer obvio pero no me sale como yo pensaba. muchas gracias
    – Selito95
    Commented el 30 jun. 2017 a las 20:25
  • @Selito95 ¿Qué es lo que no le "sale"? actualicé mi respuesta. si tiene problemas o dudas no dude en comentar.
    – Dev. Joel
    Commented el 30 jun. 2017 a las 21:11
  • mira, lo que no me sale es en vez de aumentar el widht y el height en +5, cuando lo intento para haer el -5 no me sale, puede parecer muy obvio pero no lo consigo
    – Selito95
    Commented el 1 jul. 2017 a las 10:33
  • Mira asi lo tengo yo, que es igual y lo que hace es seguir aumentando pero menos que cuando le doy al +5, es muy extraño --> function menos_5_width(){ var mi_div = document.getElementById("prueba"); var get_width = mi_div.offsetWidth; mi_div.style.width = get_width-5 +"px"; }
    – Selito95
    Commented el 1 jul. 2017 a las 10:43
  • @Selito95 revisar mi ultimo punto en mi respuesta . Saludos , si tiene problemas no dude en comentar.
    – Dev. Joel
    Commented el 1 jul. 2017 a las 23:48
0

Usando jquery es muy sencillo utilizando la funcion .Css()

$("p").css({"background-color": "yellow", "font-size": "200%"});

https://www.w3schools.com/jquery/jquery_css.asp

y animandolo tambien con la funcion .animate()

$( "#clickme" ).click(function() {
  $( "#book" ).animate({
    opacity: 0.25,
    left: "+=50",
    height: "toggle"
  }, 5000, function() {
    // Animation complete.
  });
});

http://api.jquery.com/animate/

1
  • no eres el primero que me lo dice, pero desgraciadamente tiene q ser vanilla JS de todas muchas gracias
    – Selito95
    Commented el 30 jun. 2017 a las 19:45
0

Para usar el css desde javascript, se usa la propiedad "style" del objeto.
Por ejemplo:

prueba.style.width="100px";
prueba.style.height=variable+"px";    
prueba.style.backgroundColor="red";
0

si lo que quieres es que cuando presionen algun boton el tamaño del div aumente o se haga mas pequeño deberias hacer lo siguiente:

const parent = document.getElementById("parent-buttons")
const test = document.getElementById("div-test")

function widthOrHeight(el, cuantoSumo) {
  const w = test.offsetWidth
  const h = test.offsetHeight
  
  const dataTest = el.dataset.test
  
  const qus = dataTest.slice(0, dataTest.indexOf(" "))
  const sumoOResto = dataTest.slice( dataTest.indexOf(" ")+1, dataTest.length)
  
  let wOh
  
  (qus == "width") ? wOh = w : wOh = h
  
  test.style[qus] = sumoOResto == "+" ? 
    wOh + cuantoSumo +"px" : wOh - cuantoSumo +"px"
}

parent.addEventListener("click", e => {
  const target = e.target
  
  if(target.hasAttribute("data-test")){
    widthOrHeight(target, 10)
  }
 
})
#div-test {
  width: 100px;
  height: 100px;
  background: #333;
  transition: all .3s ease-out;
}
<div id="parent-buttons">
  <button data-test="width +">Width +5</button>
  <button data-test="width -">Width -5</button>
  <button data-test="height +">Height +5</button>
  <button data-test="height -">Height -5</button>
</div>

<div id="div-test"></div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.