javascript - 如何使用 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 和 top 之前设置 position 属性:

object.style.position="absolute"

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