如何讓用戶使用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"; 

}