使用JavaScript在特定距离创建图像

vlju58qv  于 2023-01-16  发布在  Java
关注(0)|答案(1)|浏览(116)
function on_click(e)
{
  if( !e ) e = window.event;
   dragok = false;
   document.onmousemove = null;
   var x = e.target||e.srcElement;
  if( dx > 200 ) // dx is the numbers of pixels from leftside of mouse pointer
    {
      // document.write(dx); this is working it prints dx value but unable to create an image        
      var img = IEWIN ? new Image() : document.createElement('img');
      img.src="cool.jpg";
      document.getElementById(x.id).appendChild(img);
    }
 }

我在堆栈溢出上发现了这些代码片段,但当我尝试时不起作用。这里是What is the best JavaScript code to create an img element
目的是在调用函数on_click时创建图像,(onclick事件调用函数on_click)。dx是从左侧测量的像素。因此,如果鼠标指针大于200像素,并且单击鼠标,它应该在那个位置创建一个图像,我的意思是,如果dx是206,那么应该创建一个距离为206像素的图像,但是我不能用JavaScript创建一个图像元素。
我必须在JavaScript代码中进行哪些更改?

eqoofvh9

eqoofvh91#

对于所有浏览器,您所需要的是:

var img = new Image();
img.src = "cool.jpg";
img.className = "myClass";
img.id = "mainImage";
x.appendChild(img);

如果已经有了DOM元素,就没有必要先获取id,然后再执行document.getElementById(x.id),直接使用x即可。
要使用引用该图像的CSS规则,您需要创建如下规则(取决于您引用的是class还是id):

.myClass {border: 1px solid #F00;}
#mainImage {padding: 14px;}

相关问题