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

我想手动创建一个

div

元素，然后使用JavaScript向其添加一些CSS样式。我创建了一个

div

元素，并用JavaScript更改了它的样式。问题是，一些CSS样式不起作用

（

颜色

，

背景

，

宽度

，

高度

）这些属性工作正常，但（

zIndex

，

顶部

，

左侧

）属性不工作。我想知道为什么会发生这种情况，以及如何纠正它

这是我的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';
}

这是我的相关html代码

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

---

我希望这就是您想要的：

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

---

左侧

和

顶部

CSS样式设置不起作用，因为必须首先设置

位置

属性。如果未设置

位置

属性，则设置

左侧

和

顶部

样式将没有任何影响。

position

属性具有以下设置：

• 静止的
• 绝对的
• 固定的
• 相对的
• 首字母
• 继承

因此，在设置

left

和

top

之前，请尝试设置

position

属性：

object.style.position="absolute"

位置

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

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

---

我按照Sandy Good的建议，在代码中添加了第一行代码。他说，在使用“左”和“上”参数之前，只需设置“位置”参数。所以我做了。而且它有效

不要使用Id，使用class