How to Set the Left and Top CSS Positioning of a DIV Element Dynamically Using JavaScript

I want to create a div element manually and later add some CSS styling to it using JavaScript. I created a div element and changed it's style with JavaScript. The problem is, some CSS styles do not work.

this is the fiddle preview

(color, background, width, height) those properties worked fine but the (zIndex, top, left) properties do not work. I want to know why this happens and how to correct it.

this is my JavaScript code:

function css()
{    
    var element = document.createElement('div');
    element.id = "someID";
    document.body.appendChild(element);

    element.appendChild(document.createTextNode
     ('hello this javascript works'));

    // these properties work
    document.getElementById('someID').style.zIndex='3';
    document.getElementById('someID').style.color='rgb(255,255,0)';
    document.getElementById('someID').style.background='rgb(0,102,153)';
    document.getElementById('someID').style.width='700px';
    document.getElementById('someID').style.height='200px';

    //these do not work
    document.getElementById('someID').style.left='500px';
    document.getElementById('someID').style.top='90px';
}

this is my relevant html code

<input type="submit" name="cssandcreate" id="cssandcreate" value="css"  onclick="css();"/>

Answers


The left, and top CSS style settings aren't working because you must first set the position property. If the position property is not set, setting the left and top styles will have no affect. The position property has these settings:

  • static
  • absolute
  • fixed
  • relative
  • initial
  • inherit

So, try setting the position property before setting left and top:

object.style.position="absolute"

The differences between the position properties affect how subsequent settings position your elements.


document.getElementById('someID').style.position='absolute';
document.getElementById('someID').style.left='500px';
document.getElementById('someID').style.top='90px';

I added the first line of code to your code, following the suggestions by Sandy Good. He said to simply setup the 'position' paramenter BEFORE using the 'left' and 'top' ones. So I did. And it works!


I hope this is what you are looking for :

function css(){
    var element = document.createElement('div');
    element.className = "someID";
    document.body.appendChild(element);        
    element.appendChild(document.createTextNode
     ('hello this is javascript work'));

    // this properties are work
    var a = document.getElementsByClassName('someID');

    for(var i in a ){
        a[i].style.zIndex='3';
        a[i].style.color='rgb(255,255,0)';
        a[i].style.background='rgb(0,102,153)';
        a[i].style.width='700px';
        a[i].style.height='200px';
        a[i].style.left='500px';
        a[i].style.top='90px';
    }
}

Need Your Help

Why does Java's `.dateLastModified` get truncated in some Windows 7 files?

java windows datetime

I'm writing a backup program because Windows refuses to let me use its backup program for some reason. (I get an error code that I can report if need be.)

env: python\r: No such file or directory

python macos osx-mountain-lion shebang env

My Python script beak contains the following shebang: