如何使用JavaScript動態設置DIV元素的左側和頂部CSS定位

Question

我想手動創建一個div元素，然后使用JavaScript為它添加一些CSS樣式。 我創建了一個div元素，並用JavaScript改變了它的風格。 問題是，一些CSS樣式不起作用。

這是小提琴預覽

（ color ， background ， width ， height ）這些屬性工作正常，但（ zIndex ， top ， left ）屬性不起作用。 我想知道為什么會發生這種情況以及如何糾正它。

這是我的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();"/>

Answer 1

left和top CSS樣式設置不起作用，因為您必須首先設置position屬性。 如果未設置position屬性，則設置left和top樣式將不起作用。 position屬性具有以下設置：

• 靜態的
• 絕對
• 固定
• 相對的
• 初始
• 繼承

因此，在設置left和top之前嘗試設置position屬性：

object.style.position="absolute"

position屬性之間的差異會影響后續設置如何定位元素。

Answer 2

我希望這就是你要找的東西：

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

Answer 3

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

我按照Sandy Good的建議將第一行代碼添加到您的代碼中。 他說要在使用'left'和'top'之前設置'position'參數。 所以我做了。 它的工作原理！