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

Question

这个想法就像当用户改变表中的值时，他们应该适用于div。这是一个学校作业，我无法在网上找到它。蓝盒子是div，左边的文字应该更改属性：

Answer 1

得到了一个工作示例为您运行here。我希望那是你正在寻找的。

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); 

Answer 2

你需要做的JavaScript变量，例如

var box_height; 
var box_width; 

等。然后你需要为它们分配的div在你的文本框。像：

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

等。

，然后你应该能够改变框的属性是这样的：

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

您可以通过将配合这一切的onclick事件它都在一个功能，如：

function getBoxChanges() 
{ 

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

}