How to change style in javascript

Question

What is wrong with my code? I am trying to change the sizes of two boxes when the button is clicked:

<script type="text/javaScript> 
    document.getElementById("makesmaller").onclick=function(){
        document.getElementById("bigbox").style.size="100px".color="green";
    }

    document.getElementById("makebig").onclick=function(){
        document.getElementById("littlebox").style.size="1000px".color="red";
    }
</script> 

Answer 1

Firstly, there is no "size" style

There's width, height, fontSize, and I'm sure there's others, but not size

Here's what might do what you want.

document.getElementById("makesmaller").onclick=function(){
     var el = document.getElementById("bigbox");
     el.style.height="100px";
     el.style.width="100px";
     el.style.color="green";
}

Similarly for the makebig part

Answer 2

There is no documentation of a size property in CSS. What you are most likely looking for is the CSS width and height properties.

Javascript syntax for such an operation would reside in the following code:

var element = [HTML Element]; // Get HTML Element

var width, height; // Set width and height variables

element.style.width = width;
element.style.height = height;

To do so upon the calling of an onclick event, the resulting code would be written along the following lines:

// Listen for click event
element.addEventListener("click",
    function() {
        element.style.width = width; // Set new width
        element.style.height = height; // Set new height
    });

To do exactly what you are aiming for, your code would be based on this logic:

// Get buttons
var bigger = [HTML Element], 
    smaller = [HTML Element];

// Set size variables
var bigger_width, bigger_height;
var smaller_width, smaller_height;

// Add handlers
bigger.addEventListener("click",
    function() {
        element.style.width = bigger_width;
        element.style.height = bigger_height;
    });

smaller.addEventListener("click",
    function() [
        element.style.width = smaller_width;
        element.style.height = smaller_height;
    });

Alternatively, one could use the element.onclick = function() { } syntax.

Answer 3

Use width , height and cssText . There is no property in CSS called "size". By using cssText you can change multiple properties without using jQuery( eg element.css({"height": "100px", "width": "100px"})
JSFiddle: https://jsfiddle.net/2as3get3/2/

<script type="text/javaScript>
  document.getElementById("makesmaller").onclick = function(){
  document.getElementById("littlebox").style.cssText = "width: 100px; height: 100px; color: green;";
}
  document.getElementById("makebig").onclick  = function(){
  document.getElementById("littlebox").style.cssText = "width: 1000px;  height: 1000px; color:red; ";
};
  </script>