使用Javascript设置CSS位置

如何使用JS设置

相对50%50%

位置

我试过：

document.getElementById("id").style.position = "relative 50% 50%";

---

但它似乎不起作用…

您必须单独设置它们

我创建了一个变量来指向

样式

对象，因为我们正在修改多个属性，而且

with（）{…}

是

另外，我将

50%

设置为这两个属性，因为从右到左赋值，并且将此字符串赋值给这两个属性不是问题（请确保您了解这是如何工作的，例如

var a=b=[]

将

a

和

b

设置为相同的

数组

对象，通常不需要）

---

.

我执行以下操作以使元素在其父元素中居中-可以是主体或其他部分

document.getElementById（“elementId”）.style.marginLeft=“auto”； document.getElementById（“elementId”）.style.marginRight=“auto”

position属性确定元素相对于页面上其他元素的放置方式

我只是做了一个搜索，看看position属性是否可以像你在问题中显示的50%那样取值-它不能

我检查以确保CSS中添加了一些新的内容，允许将位置设置为我下面显示的内容以外的内容。我认为position可以采用的值可能是错误的（并且可以做任何事情——您总是可以为各种属性编码任何值，但它们不会做任何事情）。我看不出有什么能说明职位可以有50%这样的价值，并能真正有所作为

position属性的可能值为：

相对的

固定的

绝对的

静止的

继承

或者您可以将其从元素中删除。从我所看到的position:static的行为与您没有为元素或类编码position属性的行为相同

在看到不同值对元素位置的影响之前，position属性可能会令人困惑，即使如此，它也不总是清晰的

顺便说一句-您也可以更改style.left和style.top，但除非将“位置”设置为可能的值之一，否则它们将无效

我知道这听起来很奇怪，但这就是目前的情况（我怀疑它是否会改变），我们必须接受

因此，如果设置了“顶部”和/或“左侧”，但什么也没有发生，请查看“位置属性”值

您可以使用浏览器的“检查元素”功能“播放”属性值。我认为所有主流浏览器都有这样的功能

它允许您在浏览器中查看页面时更改CSS属性、删除和向元素添加新属性。您可以执行以下操作：将左侧边距更改为“自动”，将右侧边距更改为“自动”，然后查看元素的位置。您可以更改、添加或删除所需的任何CSS属性

您还可以将位置更改为多个值（静态、相对、绝对或固定）之一，以查看元素相对于页面上其他元素的显示方式

如果你想删除一个属性，你可以突出显示它的值，然后按delete和enter键——如果你正在查看CSS类，这将从元素或类中删除该属性

此功能允许您对任何元素的属性进行“假设”，而无需实际更改HTML或CSS并重新加载页面

我强烈建议你带一支铅笔和一张纸，每次你改变任何事情时都要做笔记，如果你不这样做，你可能会得到你想要的东西，而无法记住你所改变的一切

笔记很重要

要重述—要使元素在其父元素中居中，请使用元素的id对后面的替换元素id进行编码

document.getElementById（“elementId”）.style.marginLeft=“auto”； document.getElementById（“elementId”）.style.marginRight=“auto”

---

至于“位置”值，请在浏览器中使用“图元检查器”进行全部尝试。这是开始了解position属性的可能值的影响的快速方法。

请注意，如果您试图将内容集中在框中，则需要发布更多HTML。这并不像Alex在下面指出的错误那么简单。

var elementStyle = document.getElementById("id").style;

elementStyle.position = "relative";

elementStyle.top = elementStyle.left = "50%";