我如何才能創(chuàng)建一個(gè)新元素并將其放置在鼠標(biāo)/光標(biāo)所在的位置？我下面有一些示例代碼：<div id = "adivthing></div><script>var newthing = document.createElement("input"); document.getElementById("adivthing").appendChild(newthing); </script>
1 回答
冉冉說(shuō)
TA貢獻(xiàn)1877條經(jīng)驗(yàn) 獲得超1個(gè)贊
如果您在元素上使用position: fixed或position: absolutestyle 屬性newthing，則可以使用left和top屬性在框周圍移動(dòng)元素。
如果您從觸發(fā)事件（例如單擊）獲取鼠標(biāo)坐標(biāo)，則可以將適當(dāng)?shù)膌eft和添加top到您的元素中。
下面的例子：
function createInput(event){
var newthing = document.createElement("input");
document.getElementById("adivthing").appendChild(newthing); // Your existing code
// get the coordinates of the mouse
var x = event.clientX; // get the horizontal coordinate
var y = event.clientY; // get the vertical coordinate
// position newthing using the coordinates
newthing.style.position = "fixed"; // fixes el relative to page. Could use absolute.
newthing.style.left = x + "px";
newthing.style.top = y + "px";
}
/* Optional - Making new things more obvious in the pen */
input{
height: 10px;
width: 50px;
background: red;
}
#adivthing{
height: 600px;
width: 600px;
background: blue;
}
<!-- Onclick event added to your existing markup -->
<div id="adivthing" onclick="createInput(event)"></div>
- 1 回答
- 0 關(guān)注
- 126 瀏覽
添加回答
舉報(bào)
0/150
提交
取消