Question

所以我希望用户输入2个值（高度和宽度）然后我想获取值并将它们添加到我刚刚创建的新画布中。我得到了值但是我不确定是否要将它们添加到style.height和style.width。

＆＃13;

var createNewCanvas = document.getElementById("createNewCanvas");
var resetCreateNewCanvas = document.getElementById("resetCreateNewCanvas");
var userInputWindow = document.getElementById("userInputWindow");
var enterCanvasHeight = document.getElementById("enterCanvasHeight");
var enterCanvasWidth = document.getElementById("enterCanvasWidth");




function createNewCanvass() {

    document.body.removeChild(userInputWindow);

var enterCanvasHeightt = enterCanvasHeight.value;
var enterCanvasWidthh = enterCanvasWidth.value;
    document.body.innerHTML = enterCanvasHeightt+":"+enterCanvasWidthh;

    var newCanvas = document.createElement("canvas");

    newCanvas.classList.add("canvasDesign");

  newCanvas.style.height = enterCanvasHeightt;
    newCanvas.style.width = enterCanvasWidthh;


    document.body.appendChild(newCanvas);


}

createNewCanvas.addEventListener('click', createNewCanvass);

＆＃13;

body {
  text-align: center;
  background-color: rgb(46, 45, 45);
  color: rgb(255, 255, 255);
}
.createNewCanvas {
  margin: 0 auto;
  background-color: #fff;
  background-color: rgba(80, 80, 80, 0.7);

  width: 300px;
}
.enterCanvasHeight, .enterCanvasWidth {
  width: 50px;
  text-align: center;
}
.canvasDesign {
  border: 2px solid black;
  width: 100px;
  height: 100px;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
    <title>Canvas</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="main.css">
</head>

<body>
    <header>
        <h2>Canvas</h2>
        <menu></menu>
    </header>
    <div class="createNewCanvas" id="userInputWindow">
        Please enter the size of your canvas in pixels(px) and then click "create"<br><br>
        <form>
            <input type="number" id="enterCanvasHeight" placeholder="height"> : <input type="number" id="enterCanvasWidth" placeholder="width"><br><br>
            <input type="button" value="Create" id="createNewCanvas">
            <input type="button" value="Reset" id="resetCreateNewCanvas"><br>
        </form>
    </div>


    <footer></footer>
    <script src="Script/createNewCanvas.js"></script>
</body>

</html>

＆＃13;

Answer 1

我通过在style.height和style.width

中添加+“px”来修复此问题

newCanvas.style.height = enterCanvasHeightt+"px";
newCanvas.style.width = enterCanvasWidthh+"px";

非常感谢！

通过JS从html输入值添加画布高度，宽度

1 个答案: