JavaScriptを使用して動的にDIV要素の左と上のCSS位置を設定する方法

Question

div要素を手動で作成し、後でJavaScriptを使用してCSSスタイルを追加したいとします。 div要素を作成し、JavaScriptでスタイルを変更しました。問題は、一部のCSSスタイルが機能しないことです。

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

Answer 1

left、 top CSSスタイルの設定が機能していないのは、最初にpositionプロパティ。 positionプロパティが設定されていない場合は、leftとtopのスタイルを設定しても効果はありません。 positionプロパティは、これらの設定があります。

• 静的
• 絶対
• を固定相対
• 初期leftを設定する前にpositionプロパティを設定してみてください、そう

を継承およびtop：

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の提案に従って、コードに最初のコード行を追加しました。彼は単に「左」と「上」のものを使用する前に、単に「位置」パラメータをセットアップするように言いました。だから私はやった。そしてそれは動作します！