所以我试图在下面的代码中获取变量x和y，以确定类别myElement的图像位置。点击它应该将顶部和左侧样式设置为任何变量（光标的位置）。当我测试它时，它只是默认为undefined。变量未定义

<!doctype html> 
 
<html> 
 
<body onclick="getCoord(event)" style="height:2000px;"> 
 
<h2>click</h2> 
 
<p id="display"></p> 
 
<script> 
 
function getCoord(event) { 
 
\t var x = event.clientX; 
 
\t var y = event.clientY; 
 
\t var coord = "x:" + x + "y:" + y; 
 
\t document.getElementById("display").innerHTML = coord; 
 
\t console.log(x); 
 
\t console.log(y); 
 
\t document.getElementById('myElement').style.position = "absolute"; 
 
\t document.getElementById('myElement').style.top = y; //or whatever 
 
\t document.getElementById('myElement').style.left = x; // or whatever] 
 
}; 
 
</script> 
 
<img id="myElement" src="https://picturethismaths.files.wordpress.com/2016/03/fig6bigforblog.png?w=419&h=364"> 
 
</body> 
 
</html>

2017-06-17 KenzoEngineer

戴上'+'px''和'当你设置'left'和'top' – myfunkyside

CSS测量

你忘了添加the measurement的数字将被解释为。你的`x`后

<!DOCTYPE html> 
 
<html> 
 
<body onclick="getCoord(event)" style="height:2000px;"> 
 
<h2>click</h2> 
 
<p id="display"></p> 
 
<script> 
 
function getCoord(event) { 
 
\t var x = event.clientX; 
 
\t var y = event.clientY; 
 
\t var coord = "x:" + x + " y:" + y; 
 
\t document.getElementById("display").innerHTML = coord; 
 
\t console.log(x); 
 
\t console.log(y); 
 
    var myEle = document.getElementById('myElement'); // no need to use 3 times 
 
\t myEle.style.position = "absolute"; 
 
\t myEle.style.top = y + "px"; // plus "px" 
 
\t myEle.style.left = x + "px"; // plus "px" 
 
}; 
 
</script> 
 
<img id="myElement" src="https://picturethismaths.files.wordpress.com/2016/03/fig6bigforblog.png?w=419&h=364"> 
 
</body> 
 
</html>

来源

2017-06-17 00:19:35

这样一个明显的，我错过了的事y'！ – KenzoEngineer

它发生在我们身上@KenzoEngineer :-) –

变量未定义

回答

CSS测量

相关问题