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

Question

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);
    }
 }

我在 Stack Overflow 上找到了这些片段，但在尝试时不起作用。这是 什么是最好的 JavaScript 代码创建一个 img 元素。

目的是在调用函数 on_click 时创建图像（为 onclick 事件调用函数 on_click）。 dx 是从左侧测量的像素。因此，如果鼠标指针大于 200 像素并且单击鼠标，它应该在该位置创建一个图像我的意思是如果 dx 是 206，那么应该创建一个距离为 206 像素的图像，但我无法使用 JavaScript 创建图像元素。

我必须在 JavaScript 代码中进行哪些更改？

Answer 1

对于所有浏览器，您所需要的只是这样：

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 规则，您可以制定如下规则（取决于您引用的是类还是 id）：

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