使用Javascript设置CSS位置

Question

如何使用JS设置relative 50% 50%位置？

我想：

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

，但它不似乎工作...

Answer 1

你必须单独设置。

我做了一个变量，指向style对象，因为我们修改了多个属性，因为with() { ... }是considered harmful。

而且，我设置了50%到的，因为从右到左分配这两个属性，而且由于该字符串的两个属性的分配是没有问题的（请确保您理解它是如何工作的，如var a = b = []将设置a和b到相同Array对象，通常不期望）。

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

elementStyle.position = "relative"; 

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

jsFiddle。

Answer 2

我按照以下步骤将一个元素置于其父元素的中心 - 可以是元素或其他分区。

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

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

我只是做了一个搜索，看看位置属性是否可以像你在问题中显示的50％这样的值 - 它不能。

我检查了一下，以确保CSS中新增了一些可以将位置设置为除了下面显示的位置以外的内容。我认为，也许我错误地认为职位可以采取的价值观（并且做任何事情 - 你总是可以为任何属性编写任何值，而不是他们打算拥有的值，但他们不会做任何事情）。我没有看到任何表示职位可以拥有50％的价值并且实际上有所作为的东西。

位置属性的可能值是：

相对

固定

绝对

静态

继承

，或者你可以把它关闭元素。从我见过的位置：静态行为相同，如果你没有编码元素或类的位置属性。而且即便如此，它并不总是很清楚 - 直到你看到的元素的位置的不同值的效果

Go read about position here

position属性可能会造成混淆。

顺便说一句 - 你也可以改变style.left和style.top，但是除非position被设置为其中一个可能的值，否则它们将不起作用。

我知道这听起来很奇怪，但它是目前工作的方式（我怀疑它会永远改变），我们必须忍受。

所以，如果你设置的顶部和/或左侧并没有任何反应，看位置的属性值，

可以“玩”的属性值与您的浏览器的“检查元素”设施。我认为所有主流浏览器都有这样的设施。 Go read this page about "inspecting"

它允许您在浏览器中查看页面时更改CSS属性，删除并添加新的元素。你可以做这样的事情，比如将margin-left改为auto，margin-right改为auto，看看元素的位置。您可以更改，添加或删除所需的任何CSS属性。

您还可以将位置更改为其中一个值（静态，相对，绝对或固定）以查看元素与页面上其他元素的关系。

如果你想删除一个属性，你可以突出显示它的值，然后按下delete并输入 - 如果你正在查看CSS类，那么将从元素或类中删除属性。

此工具允许您在不更改HTML或CSS并重新加载页面的情况下播放任何元素属性的“what if”。

我强烈建议你每次改变任何东西时都有一支铅笔和一张纸，并做笔记，如果你不这样做，你可能会按照你想要的方式结束事情，并且不能记住你所有的东西改变。

备注非常重要！

回顾 - 将一个元素置于其父元素的中间，编码后面的内容 - 用元素的id替换元素。

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

至于位置值，请使用浏览器中的元素检查器全部尝试。这是开始了解位置属性可能值的影响的一种快速方法。