In the following code, I cant set position for an image which is used in 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>

In the following code, I cant set position for an image which is used in 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>

I tried the below code for positioning,but its not working properly.

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

• javascript

• 2 I'm not sure exactly what you're trying to do, but margin-left and margin-top are CSS styles, not attributes. Therefore you should use y.style.marginLeft = '100px';. Note that I removed the jQuery tag as this is pletely unrelated to that. I'd also strongly suggest you give your variables meaningful names. xy, y etc are all next to useless. – Rory McCrossan Commented Feb 2, 2017 at 11:16

1 Answer 1

You should access your CSS style property for a DOM element using style property, example:

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

The Element.setAttribute() instead could be used to change an attribute for a DOM element or its value, for example on an image you could change the src attribute, but setAttribute does not work for CSS properties.

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

Edit following your ment:

You can apply a CSS class to your DOM element using, the CSS class will contain the style you want to apply:

y.classList.add('yourCssClass')

More information can be found here.