Javascript 变量Js在PHP代码中不起作用

你可以帮我写这段代码。我需要得到图像的位置并保存在变量PHP中，然后在div html中写入顶部和左侧位置。 我尝试了所有的方法，但是失败了 谢谢

---

如果您的目标是将div移动到与
#image
相同的位置，那么您可以完全不用PHP完成这一任务

类似这样的方法会奏效：

$(document).ready(function() {
    var position = $('#image').position();
    $('div').css('top',position.top + 'px');
    $('div').css('left',position.left + 'px');
})

您可以看到它在这里工作：

希望有帮助
 在服务器将页面推送到客户端之前，服务器端脚本正在服务器上进行翻译。因此，JavaScript变量在此步骤中不可用

建议您修改代码，使用纯Javascript设置内部html：

<?php

echo "<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'>\n";
echo "</script>\n";
echo "<script type=\"text/javascript\">\n";  
echo "window.onload = function() {\n";  
echo "var position = $('#image').position();\n";    
?>

document.write ("<div style='position: absolute; top: "+position.top+"px; left: "+position.left+"px; opacity: 1;'>"

<?php
echo "};\n";
echo "</script>\n"; 
?>

如果需要如上所述的DIV元素，则不应使用PHP。此外，您还需要与IMG元素相同的DIV宽度和高度。以下是此代码：

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'></script>
<script type="text/javascript">
    $(window).on('load', function() {
        var position = $('#image').position();
        $('#info').css({
            'top': position.top,
            'left': position.left,
            'width': $('#image').width(),
            'height': $('#image').height()
        });
    });
</script>
<img id="image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Stack_Overflow_logo.svg/800px-Stack_Overflow_logo.svg.png" />
<div id="info" style='position: absolute; opacity: 1;'></div>


$（窗口）.on（'load'，function（）{
变量位置=$（“#图像”）.position（）；
$（'#info'）.css({
“top”：position.top，
“left”：position.left，
“宽度”：$（“#图像”）.width（），
‘高度’：$（‘图像’）。高度（）
});
});

不要认为你可以在PHP（服务器）端拥有图像的位置。
你知道客户端和服务器端的区别吗？为什么你毫无理由地重复javascript？我不明白你为什么这样做。你为什么要使用PHP？你有什么问题？你得到了什么样的结果？这与你预期的结果有什么不同？谢谢阿里。我解决了这个问题
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'></script>
<script type="text/javascript">
    $(window).on('load', function() {
        var position = $('#image').position();
        $('#info').css({
            'top': position.top,
            'left': position.left,
            'width': $('#image').width(),
            'height': $('#image').height()
        });
    });
</script>
<img id="image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Stack_Overflow_logo.svg/800px-Stack_Overflow_logo.svg.png" />
<div id="info" style='position: absolute; opacity: 1;'></div>