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>