Change css using js vanilla

Question

Change css using js vanilla

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)
#4 by (0 votes)

1

I am trying to change the dimensions of a div by modifying the css of it by the DOM model of 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>

javascript html css

asked by Selito95 30.06.2017 в 21:41

source

4 answers

Problem when loading audio with Android Studio Why is the web displayed badly?

score 1 · Answer 1

Two important things to make your code work.

Width is incorrect, the properties must be lowercase. width
The property not only accepts numeric values but also must specify the type of measure (px, em, etc)
Also keep in mind that to modify the values in each click , you must obtain the current width of the element within the function.
An important consideration is that if you want to decrease the width of the element you should specify the size of border ie border: 1px solid ; or the one you want if you could not have problems or add the property box-sizing A very important property to change the cash model

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>

score 0 · Answer 2

Using jquery is very simple using the .Css () function

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

link

and also animate it with the function .animate ()

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

link

score 0 · Answer 3

0

To use the css from javascript, the "style" property of the object is used.
For example:

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

answered by 30.06.2017 в 22:11

score 0 · Answer 4

if what you want is that when you press a button the size of the div increase or become smaller you should do the following:

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>