Changing multiple object properties simultaneously with JavaScript

The following code is placed immediately before the closing </body> tag. The script works by manipulating the DOM, so placing it at the end of the file allows the DOM to complete before the script can run:

<script>

function changeStuff(){
   var box = document.getElementById("box");
   box.style.backgroundColor = "#B2D526";
   box.style.border = "10px solid #98b620";
   box.style.paddingLeft = "100px";
}

function changeBack(){
   var box = document.getElementById("box");
   box.style.backgroundColor = "#D5DEEA";
   box.style.border = "none";
   box.style.paddingLeft = "25px";
}

var change = document.getElementById("change");
change.onclick = changeStuff;

var back = document.getElementById("back");
back.onclick = changeBack;

</script>

The above example uses two functions, one to make the change and one to change it back. In this case, we assign the object we're interested in (box) to a variable and then use the variable to target that object for each property we want to change.

The object (element) you want to change is identified by an ID. Remember, this is unique to that object. In this example, the element containing the code above has been given the ID "box" and the opening tag looks like this: <pre id="box">.

Each script is run by clicking an element which has an onclick event handler. In this case it's two spans with an id and styled to look like a button.

Try the "buttons" below to see what happens.

Change stuffChange back