DIV Elemanı'nın Sol ve Üst CSS Konumlandırmasını Dinamik Olarak Kullanma JavaScript'i Sıfırlama

Question

div öğesini el ile oluşturmak ve daha sonra JavaScript kullanarak bazı CSS stili eklemek istiyorum. Bir div öğesi oluşturdum ve stilini JavaScript ile değiştirdim. Sorun şu ki, bazı CSS stilleri çalışmıyor.

this is the fiddle preview

(color, background, width, height) bu özellikler iyi çalıştı ama (zIndex, top, left) özellikleri çalışmaz. Bunun neden olduğunu ve nasıl düzeltileceğini bilmek istiyorum.

bu benim JavaScript kodu:

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

bu benim alakalı html kodu

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

Answer 1

left, ve top CSS stili ayarları çalışmıyor çünkü ilk olarak'ü ayarlamanız gerekiyorözelliği. position özelliği ayarlanmamışsa, left ve top stillerini etkilemez. position özelliği bu ayarları vardır:

Yani

göreceli

ilk

devralır

• mutlak
• statik sabit left ayarlamadan önce position özelliğini ayarlamayı deneyin ve top: position özellik arasındaki

  object.style.position="absolute" 
  

  farklılıklar nasıl müteakip ayarları pozisyon sizin elemanlarını etkiler.

Answer 2

olduğunu bu aradığınız budur umut:

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

Kodun ilk satırını, Sandy Good'in önerilerini izleyerek kodunuza ekledim. Sadece 'sol' ve 'üst' olanları kullanarak 'konum' paramenterini ÖNCE kurmayı söyledi. Ben de yaptım. Ve çalışıyor!