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

Variable Js not working in PHP code

本文关键字：不起作用 代码 PHP Js 变量      更新时间：2023-09-26

可以帮助我完成这段代码。 我需要获取图像的位置并保存在变量 PHP 中，然后在div 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";    
echo "};'n";
echo "</script>'n"; 
$top =  "<script> document.write(position.top) </script>";
$left = "<script> document.write(position.left) </script>";

echo "<div style='position: absolute; top: ".$top."px; left: ".$left."px; opacity: 1;'>'n";
echo "</div>";

？>

如果你的目标是将div 移动到与 #image 相同的位置，你可以完全在没有 PHP 的情况下完成。

这样的东西会起作用：

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

您可以在此处看到它的工作原理：https://jsfiddle.net/4bk852kv/

希望对您有所帮助！

服务器

端脚本在服务器将页面推送到客户端之前在服务器上进行翻译。因此，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。此外，您的DIV需要与IMG元素相同的宽度和高度。这是为此编写的代码：

<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>

不要认为您可以在PHP（服务器）端拥有图像的位置。

相关文章：