如何让用户使用JavaScript更改div的属性？

Question

The idea is like when the user changes value's in the table, they should apply to the div. This is for a school assignment and I can't find it online. The blue box is the div, the text on the left should change the properties:

Answer 1

you need to make javascript variables like

var box_height; 
var box_width; 

etc.. Then you need assign them the divs on your text boxes. Like:

box_height= document.getElementById('height_input_div').value; 
box_width = document.getElementById('width_input_div').value; 

etc..

and then you should be able to change the properties of the box like this:

document.getElementById('myBox').style.height = box_height + "px";

You can tie all this to an onclick event by putting it all in a function like:

 function getBoxChanges()
 {

    document.getElementById('myBox').style.height = box_height + "px";

 }

Answer 2

Got a working example up and running for you here . I hope that is what you were looking for.

HTML

<table>
  <tr>
    <td>Left</td>
    <td><input type="text" id="left-input"/>
  </tr>
  <tr>
    <td>Top</td>
    <td><input type="text" id="top-input"/>
  </tr>
  <tr>
    <td>Width</td>
    <td><input type="text" id="width-input"/>
  </tr>
  <tr>
    <td>Height</td>
    <td><input type="text" id="height-input"/>
  </tr>
  <tr>
    <td>Color</td>
    <td><input type="text" id="color-input"/>
  </tr>
  <tr>
    <td>Background Color</td>
    <td><input type="text" id="background-color-input"/>
  </tr>
  <tr>
    <td>Text</td>
    <td><input type="text" id="text-input"/>
  </tr>
  <tr>
    <td></td>
    <td><button type="button" id="save-button">Save</button></td>
  </tr>
</table>

<div id="result"></div>

CSS

td {
    border: 1px solid black;
}

JavaScript

const leftInput = document.getElementById('left-input');
const topInput = document.getElementById('top-input');
const widthInput = document.getElementById('width-input');
const heightInput = document.getElementById('height-input');
const colorInput = document.getElementById('color-input');
const textInput = document.getElementById('text-input');
const backgroundColorInput = document.getElementById('background-color-input');
const saveButton = document.getElementById('save-button');

const applyValues = () => {
  const left = leftInput.value + "px";
  const top = topInput.value + "px";
  const width = widthInput.value + "px";
  const height = heightInput.value + "px";
  const color = colorInput.value;
  const backgroundColor = backgroundColorInput.value;
  const text = textInput.value;

  /*
   * You probably want to use `result.style.marginLeft` and `result.style.marginTop`.
   */

  result.style.left = left;
  result.style.top = top;
  result.style.width = width;
  result.style.height = height;
  result.style.color = color;
  result.style.backgroundColor = backgroundColor;

  result.innerHTML = text;
  console.log(result);
}

saveButton.addEventListener('click', applyValues);