Question

基本上我试图得到它，以便当你点击某个img时，它会固定在该位置，直到刷新页面为止;这意味着即使滚动浏览其他图像和文本，img也会卡在屏幕上。

我在编码方面非常非常棒，但我正在研究这个并且不能让它起作用;但我认为它可能会像某种Java脚本（onclick）激活一个css样式位置：修复？

编辑：JoshC在下面给出的解决方案：

<script type="text/javascript">
 window.onload=function(){
 var img = document.getElementById('image');
 img.onclick = function(){
 this.style.position = 'fixed';
 }
 }

 </script>

 <style type="text/css">

 body {
height:2000px;
 }
 img { top:0; left:0; 
 }

 </style>

 <html>

 <body>

 <br><br><br><br><br>
 <img id="image" src="http://placehold.it/200x200"/>


 </body>
 </html>

Answer 1

获取元素并使用onclick事件：

var img = document.getElementById('image');
img.onclick = function(){
    this.style.position = 'fixed';
}

EXAMPLE HERE

Answer 2

你猜对了。将此代码放在<body>的末尾（或者确保它在主体加载后运行）。

var img = document.getElementById('my_img');
img.addEventListener('click', function () {
    this.style.position = "fixed";
});

并将图片的id属性设置为“my_img”。你不是那个坏的菜鸟......

点击它后如何修复img位置？

2 个答案: