Html 如何使用 JavaScript 动态设置 DIV 元素的左侧和顶部 CSS 定位

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

提问by Madhawa Priyashantha

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

我想div手动创建一个元素，然后使用 JavaScript 为其添加一些 CSS 样式。我创建了一个div元素并使用 JavaScript 更改了它的样式。问题是，某些 CSS 样式不起作用。

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.

( color, background, width, height) 这些属性工作正常，但 ( zIndex, top, left) 属性不起作用。我想知道为什么会发生这种情况以及如何纠正它。

this is my JavaScript code:

这是我的 JavaScript 代码：

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

这是我的相关 html 代码

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

回答by Alan Wells

The left, and topCSS style settings aren't working because you must first set the positionproperty. If the positionproperty is not set, setting the leftand topstyles will have no affect. The positionproperty has these settings:

在left和topCSS样式设置不工作，因为你必须先设置position属性。如果position未设置该属性，则设置left和top样式将不起作用。该position属性具有以下设置：

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

• 静止的
• 绝对
• 固定的
• 相对的
• 最初的
• 继承

So, try setting the positionproperty before setting leftand top:

因此，position在设置left和之前尝试设置属性top：

object.style.position="absolute"

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

position属性之间的差异会影响后续设置如何定位您的元素。

回答by Ankit Tyagi

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

回答by Freddy

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!

我按照 Sandy Good 的建议将第一行代码添加到您的代码中。他说在使用“左侧”和“顶部”参数之前只需设置“位置”参数。所以我做了。它有效！