Javascript HTML5文本框在画布上的位置_Javascript_Css_Html_Canvas

Javascript HTML5文本框在画布上的位置

javascript css html canvas

Javascript HTML5文本框在画布上的位置,javascript,css,html,canvas,Javascript,Css,Html,Canvas,我试图在单击按钮时更改文本框的位置。我收到以下错误消息：“无法设置未定义的属性'top'” 删除以下行时：“var user=document.getElementById（“user”）.value；” 它很好用有什么建议吗 #canvas{ position: absolute; background-color: red; margin-left: 50px; margin-top: 10px; } #user{ top:160px; right:1000px; position: a

我试图在单击按钮时更改文本框的位置。我收到以下

错误消息：“无法设置未定义的属性'top'”

删除以下行时：

“var user=document.getElementById（“user”）.value；”

它很好用

有什么建议吗

#canvas{
position: absolute;
background-color: red;
margin-left: 50px;
margin-top: 10px;
}

#user{
top:160px;
right:1000px;
position: absolute;
border-radius: 10px ; 
width: 180px;
border: 3px solid #BADA55;
-webkit-box-shadow: 
  inset 0 0 8px  rgba(0,0,0,0.1),
        0 0 16px rgba(0,0,0,0.1); 
-moz-box-shadow: 
  inset 0 0 8px  rgba(0,0,0,0.1),
        0 0 16px rgba(0,0,0,0.1); 
box-shadow: 
  inset 0 0 8px  rgba(0,0,0,0.1),
        0 0 16px rgba(0,0,0,0.1); 

background: rgba(255,255,255,0.0);
color: blue;
font-size: 40px;
font-weight: bold;
margin: 0 0 10px 0;
display: inline;
visibility: visible;

}

#btn{
position: absolute;
bottom :200px;
right:1100px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <link rel="stylesheet" href="main.css">
     <script>

         function changePosition(){
            var user = document.getElementById("user").value;
            user.style.top= "100px";
            user.style.rigth = "100px";
            console.log(user);
         }
     </script>
</head>

<body>   
    <div id="wra">
    <canvas id="canvas" width="350" height="350"></canvas>
    <input type="text" id="user" value=""><br>

    </div>
    <button  onclick ="changePosition()" id="btn" type="button">Submit</button></p>
</body>
</html>

#画布{
位置：绝对位置；
背景色：红色；
左边距：50像素；
边缘顶部：10px；
}
#使用者{
顶部：160px；
右：1000px；
位置：绝对位置；
边界半径：10px；
宽度：180px；
边框：3倍实心#BADA55；
-webkit盒阴影：
插图0.8px rgba（0,0,0,0.1），
0.16pxRGBA（0,0,0,0.1）；
-moz盒阴影：
插图0.8px rgba（0,0,0,0.1），
0.16pxRGBA（0,0,0,0.1）；
框阴影：
插图0.8px rgba（0,0,0,0.1），
0.16pxRGBA（0,0,0,0.1）；
背景：rgba（255255,0.0）；
颜色：蓝色；
字体大小：40px；
字体大小：粗体；
裕度：0 10px 0；
显示：内联；
能见度：可见；
}
#btn{
位置：绝对位置；
底部：200px；
右：1100px；
}
函数changePosition（）{
var user=document.getElementById（“用户”）.value；
user.style.top=“100px”；
user.style.rigth=“100px”；
console.log（用户）；
}


提交

更改

 function changePosition(){
    var user = document.getElementById("user").value;
    user.style.top= "100px";
    user.style.rigth = "100px";
    console.log(user);
 }

到

很抱歉，我拼错了单词“right”，我之所以使用“.value”，也是因为我想打印或存储文本框的值，然后使用

user.value

 function changePosition(){
    var user = document.getElementById("user");
    user.style.top= "100px";
    user.style.right = "100px";
    console.log(user.value);
 }