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

问题描述：

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

您好，欢迎StackOverflow上。请花一些时间阅读帮助页面，尤其是名为[“我可以询问什么主题？”（http://stackoverflow.com/help/on-topic）和[“我应该问什么类型的问题避免问？“]（http://stackoverflow.com/help/dont-ask）。更重要的是，请阅读Stack Overflow [问题清单]（http://meta.stackoverflow.com/questions/260648/stack-overflow-question-checklist）。您可能还想了解[最小，完整和可验证示例]（http://stackoverflow.com/help/mcve）。 –

类似于：'div.style.left = document.getElementById（“left”）。value;' – Barmar

当用户单击该按钮时，可以使用类似代码来更改相应输入中的每个样式属性。 – Barmar

答

得到了一个工作示例为您运行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);

答

你需要做的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"; 

}

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

相关推荐