在特定距離使用javascript創建圖像

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

我在stackoverflow上發現了這些代碼片段，但是當我嘗試它時卻無法工作。這裏是What is the best JavaScript code to create an img element 在特定距離使用javascript創建圖像

其目的是在函數on_click被調用時創建一個圖像（函數on_click被稱爲onclick事件）。 dx是從左側測量的像素。因此，如果鼠標指針大於200像素，並且單擊鼠標，它應該在該位置創建一個圖像，我的意思是如果dx是206，則應該創建一個距離爲206像素的圖像。但是我無法創建一個圖像元素與javascript

我必須在JavaScript代碼中做出什麼改變？

來源

2011-09-18 niko

所有你需要的是這對所有的瀏覽器：

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

來源

2011-09-18 06:33:42 jfriend00

絕對的工作！所以現代瀏覽器不支持document.createelement？你能告訴我如何創建它的寬度和高度屬性。我的意思是我可以設置img.id並在CSS表中設置屬性？但不能我們只是追加我們需要總是提及父節點？ – niko

沒有jfriend我想創建img.id或img.class創建的img標籤的JavaScript，然後引用其屬性使用CSS表可以做到這一點？ – niko

我在示例中添加了更多行以顯示您添加的類名和您可以使用CSS規則引用的標識。一個Image對象是一個DOM元素。我認爲你可以使用'document.createElement（）'來代替，但爲什麼？ '新的Image（）'語法是內置的。 – jfriend00

在特定距離使用javascript創建圖像

回答

相關問題