如何使用 JavaScript 动态设置 DIV 元素的左侧和顶部 CSS 位置

How to Set the Left and Top CSS Positioning of a DIV Element Dynamically Using JavaScript

本文关键字：顶部 位置 CSS 元素 JavaScript 何使用 动态 设置 DIV      更新时间：2023-09-26

我想手动创建一个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();"/>

left 和 top CSS 样式设置不起作用，因为必须先设置 position 属性。 如果未设置 position 属性，则设置left和top样式将不起作用。 position属性具有以下设置：

  • 静态的
  • 绝对
  • 固定
  • 相对
  • 初
  • 继承

因此，请尝试在设置left和top之前设置 position 属性：

object.style.position="absolute"

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

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

我按照 Sandy Good 的建议将第一行代码添加到您的代码中。他说，在使用"左"和"顶部"参数之前，只需设置"位置"参数。所以我做到了。它有效！

我希望这就是您正在寻找的：

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';
    }
}
相关文章：