JavaScriptからイメージ位置を設定する方法

Question

次のコードでは、Javascriptで使用されるイメージの位置を設定できません。

document.getElementById("dis").disabled = true; 
 
var counter = 0; 
 
var x = document.getElementById("myDIV"); 
 
var y = document.createElement("img"); 
 
var y1 = document.createElement("img"); 
 
var y2 = document.createElement("img"); 
 
var xy = document.createElement("img"); 
 

 
function myFunction() { 
 
    document.getElementById("dis").disabled = false; 
 
    counter++; 
 
    if (counter % 2 == 0) { 
 
    if (y && xy && x) { 
 
     y.style.display = 'none'; 
 
     xy.style.display = 'inline'; 
 
     xy.setAttribute("src", "line.png"); 
 
     xy.setAttribute("width", "75"); 
 
     xy.setAttribute("height", "3"); 
 
     xy.setAttribute("style", "margin:a b c d"); 
 
     document.body.appendChild(xy); 
 
    } 
 
    } else { 
 
    xy.style.display = 'none'; 
 
    y.setAttribute("src", "circle.png"); 
 
    y.setAttribute("width", "236"); 
 
    document.body.appendChild(y); 
 
    y.style.display = 'inline'; 
 
    } 
 
}

<button id="dis" onclick="myFunc()">Click me</button> 
 
<img src="num1.png" style="position:absolute;top:80px;" onclick="myFunction()" /> 
 
<div id="myDIV"> 
 
</div> 
 
<p id="demo"></p>

私は位置決めのための以下のコードを試してみましたが、そのは正常に動作しません。

y.setAttribute("style", "margin-left:100px;"); 
y.setAttribute("style", "margin-top:-60px;"); 

Answer 1

あなたはstyleプロパティを使用してDOM要素のためのあなたのCSSスタイルプロパティにアクセスする必要があり、例：

y.style.marginLeft = '100px'; 
y.style.maringTop = '-60px'; 

代わりため、DOM要素またはその値の属性を変更するために使用することができElement.setAttribute()imageの例では、src属性を変更できますが、setAttributeはCSSプロパティでは機能しません。あなたのコメント次

y.setAttribute("src", "anUrl.png"); 

編集：

y.classList.add('yourCssClass')

の詳細：あなたが使用してDOM要素にCSSクラスを適用することができます

、CSSクラスを適用したいスタイルが含まれています情報can be found here。