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

我想手動創建div元素，然後使用JavaScript爲其添加一些CSS樣式。我創建了一個div元素並使用JavaScript更改了它的樣式。問題是，一些CSS樣式不起作用。如何設置左側和頂部CSS動態使用JavaScript定位DIV元素

this is the fiddle preview

（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();"/>

來源

2013-10-29 Fast Snail

Jsfiddle please？ – bjb568

不要使用Id，使用類 –

的left，和top CSS樣式設置不起作用，因爲您必須先設置position財產。如果未設置position屬性，則設置left和top樣式將不會產生任何影響。該position屬性有下列設置：

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

所以，儘量設置left之前設置position財產和top：

object.style.position="absolute"

的position性能之間的差異會影響您的設置以後如何定位元素。

來源

2014-02-23 22:04:31

tnx ..我收到的第一個正確的答案 –

我希望這是你在找什麼：

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

來源

2013-10-29 05:01:58

'for（var i in a）' – bjb568

哦，是的！感謝您指出:) –

相同的結果.. left，top不工作 –

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

我將第一行代碼添加到您的代碼中，遵循Sandy Good的建議。他說，只需在使用「左」和「頂」的參數之前設置「位置」參數。所以我做了。它的工作原理！

來源

2014-04-16 18:38:02 Freddy

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

回答

相關問題