JS - 如何从输入值设置div的宽度和高度？

问题描述：

所以，我使用JavaScript创建了一个盒子，然后我想使用两个表单输入来设置盒子的宽度和高度，一个用于宽度，另一个用于高度。我似乎无法做到这一点。JS - 如何从输入值设置div的宽度和高度？

这里的HTML代码：

<form action="" id="theForm"> 
    <label for="width">Box Width: </label> 
    <input type="text" id="width" name="width"> 

    <label for="height">Box Height: </label> 
    <input type="text" id="height" name="height"> 

    <input type="submit" value="Create Box" id="submit-btn"> 
</form>

这里的JS代码：

var form = document.getElementById("theForm"), 
    box = document.createElement("div"); 

    document.body.appendChild(box); 

form.addEventListener("submit", function() { 
    var width = form.elements["width"].value, 
     height = form.elements["height"].value; 

    box.style.width = width + "px"; 
    box.style.height = height + "px"; 
});

似乎当我手动设置宽度和高度，但做工精细而不是当我试图从一开始就输入。我很新的JS，所以任何帮助将不胜感激。

添加另一行代码//你的形式@aroundsix – 2015-04-02 18:26:00

谢谢@MalikAsifComsats定义的事件侦听器的最后返回false //。 – aroundsix 2015-04-02 18:32:12

答

我可能会用@ epascarello的答案达成一致，但而不是返回false，我会使用preventDefault();

form.addEventListener("submit", function(e) { // Don't forget to pass the 'e' parameter 
    var width = form.elements["width"].value, 
    height = form.elements["height"].value; 

    box.style.width = width + "px"; 
    box.style.height = height + "px"; 

    e.preventDefault(); 
});

使用preventDefault将阻止的默认行为事件通过，这是表单提交。

你可以用链接和其他东西也使用它。

是的，这就是我最终做的事情，因为使用return false只会让它出现几分之一秒。感谢您的帮助。 – aroundsix 2015-04-02 18:33:39

很高兴帮助:) – 2015-04-02 18:41:37

答

表单提交以便页面刷新。您需要取消表单提交。

var form = document.getElementById("theForm"), 
 
    box = document.createElement("div"); 
 

 
    document.body.appendChild(box); 
 

 
form.addEventListener("submit", function() { 
 
    var width = form.elements["width"].value, 
 
     height = form.elements["height"].value; 
 

 
    box.style.width = width + "px"; 
 
    box.style.height = height + "px"; 
 
    
 
    return false; 
 
});

div { background-color: #CFC; }

<form action="" id="theForm"> 
 
    <label for="width">Box Width: </label> 
 
    <input type="text" id="width" name="width"> 
 

 
    <label for="height">Box Height: </label> 
 
    <input type="text" id="height" name="height"> 
 

 
    <input type="submit" value="Create Box" id="submit-btn"> 
 
</form>

我可以看到它闪烁一秒，然后它消失，如果我使用返回false;但是，如果我使用event.preventDeafault（）;它完美地工作。非常感激。 – aroundsix 2015-04-02 18:30:55

答

对我的作品有一个变化：增加return false;到处理程序，所以提交不通过，并重新加载页面。

var form = document.getElementById("theForm"); 
 

 
var box = document.createElement("div"); 
 
document.body.appendChild(box); 
 

 
form.addEventListener("submit", function() { 
 
    var width = form.elements["width"].value, 
 
    height = form.elements["height"].value; 
 

 
    box.style.width = width + "px"; 
 
    box.style.height = height + "px"; 
 
    box.style.border = "1px solid red"; // for demo visibility purposes 
 
    return false; 
 
});

<form action="" id="theForm"> 
 
    <label for="width">Box Width:</label> 
 
    <input type="text" id="width" name="width"> 
 

 
    <label for="height">Box Height:</label> 
 
    <input type="text" id="height" name="height"> 
 

 
    <input type="submit" value="Create Box" id="submit-btn"> 
 
</form>

谢谢你的帮助。适用于event.preventDefault（）;简直不敢相信我没有想到我自己。 – aroundsix 2015-04-02 18:31:49

JS - 如何从输入值设置div的宽度和高度？

相关推荐