使用 Javascript 设置 CSS 位置

Setting CSS position using Javascript

提问by McRonald

How to set relative 50% 50%position using JS?

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

I tried:

我试过：

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

but it don't seems to work...

但它似乎不起作用......

回答by alex

You have to set them individually.

您必须单独设置它们。

I made a variable to point to the styleobject, because we are modifying more than one property and because with() { ... }is considered harmful.

我创建了一个指向style对象的变量，因为我们正在修改多个属性并且因为with() { ... }被认为是有害的。

Also, I set the 50%to both properties because of right to left assignment, and because assignment of this string to the two properties isn't a problem (make sure you understand how this works, e.g. var a = b = []will set aand bto the sameArrayobject, often not desired).

此外，50%由于从右到左分配，我将 设置为两个属性，并且因为将此字符串分配给两个属性不是问题（确保您了解这是如何工作的，例如var a = b = []将设置a和b到同一个Array对象，通常不会需要）。

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

elementStyle.position = "relative";

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

jsFiddle.

js小提琴。

回答by Elliott

I do the following to center an element in its parent - which could be the body or another division.

我执行以下操作以将元素居中在其父元素中 - 这可能是主体或其他部门。

document.getElementById("elementId").style.marginLeft = "auto"; document.getElementById("elementId").style.marginRight= "auto";

document.getElementById("elementId").style.marginLeft = "auto"; document.getElementById("elementId").style.marginRight="auto";

The position property determines how the element is placed in relation to the other elements on the page.

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

I just did a search to see if the position property can take values like the 50% you show in your question - it can't.

我只是搜索了一下 position 属性是否可以采用您在问题中显示的 50% 之类的值 - 它不能。

I checked to make sure something new had been added to CSS that allowed setting position to something other than those I show below. I thought that maybe I was wrong about the values that position can take (and do anything -- you can always code any values for various properties, than they are intended to have, but they won't do anything). I see nothing that says position can have values like 50% and actually do something.

我检查以确保已将新内容添加到 CSS 中，允许将位置设置为我在下面显示的内容以外的内容。我想也许我对 position 可以采用的值是错误的（并且可以做任何事情 - 您总是可以为各种属性编写任何值，而不是它们的预期值，但它们不会做任何事情）。我看不到任何东西说位置可以有像 50% 这样的值并且实际上可以做一些事情。

The possible values of the position property are:

position 属性的可能值是：

relative

相对的

fixed

固定的

absolute

绝对

static

静止的

inherit

继承

or you can leave it off the element. From what I've seen position: static behaves the same as if you had not coded the position property for the element or class.

或者你可以把它放在元素之外。从我看到的 position: static 的行为来看，就好像您没有为元素或类编码 position 属性一样。

Go read about position here

在此处阅读有关职位的信息

The position property can be confusing until you see the effects of the different values on the position of the element - and even then it is not always clear.

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

By the way - you can also change style.left and style.top but they will have no effect unless position is set to one of the possible values.

顺便说一句 - 您也可以更改 style.left 和 style.top 但除非将 position 设置为可能的值之一，否则它们将不起作用。

I know that sounds strange but it is how things currently work (and I doubt it will ever be changed) and we have to live with.

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

So, if you set the top and/or left and nothing happens, look at the position properties value,

因此，如果您设置顶部和/或左侧并且没有任何反应，请查看位置属性值，

You can "play" with property values with the "Inspect Element" facility of your browser. I think all of the major browsers have such a facility. Go read this page about "inspecting"

您可以使用浏览器的“检查元素”工具“播放”属性值。我认为所有主要的浏览器都有这样的功能。去阅读这个关于“检查”的页面

It allows you to change CSS properties, delete, and add new ones, to the elements as you look at the page in your browser. You can do such things as changing the margin-left to auto and the margin-right to auto and see how the element is positioned. You can change, add, or delete any CSS properties you want.

当您在浏览器中查看页面时，它允许您更改 CSS 属性、删除和添加新的元素到元素。您可以执行诸如将 margin-left 更改为 auto 并将 margin-right 更改为 auto 之类的操作，并查看元素是如何定位的。您可以更改、添加或删除所需的任何 CSS 属性。

You can also change the position to one of it several values (static, relative, absolute, or fixed) to see how the element is display in relationship to the other elements on the page.

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

If you want to remove a property you can highlight its value and press delete and enter - that will remove the property from the element or class, if you are looking at class CSS.

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

This facility allows you to play "what if" with any element's properties without actually changing the HTML or CSS and reloading the page.

此工具允许您使用任何元素的属性播放“假设”，而无需实际更改 HTML 或 CSS 并重新加载页面。

I strongly suggest that you have a pencil and pad of paper and make notes every time you change anything, If you don't you may wind up getting things the way you want them and not be able to remember everything that you changed.

我强烈建议您准备好铅笔和便笺簿，并在每次更改任何内容时记下笔记，否则您可能会以您想要的方式获得事物，并且无法记住您更改的所有内容。

Notes are very important!

笔记很重要！

To recap - to center an element within its parent, code the what follows - replaced elementid with the id of your element.

回顾一下 - 将元素置于其父元素的中心，编写以下代码 - 用元素的 id 替换 elementid。

document.getElementById("elementId").style.marginLeft = "auto"; document.getElementById("elementId").style.marginRight= "auto";

document.getElementById("elementId").style.marginLeft = "auto"; document.getElementById("elementId").style.marginRight="auto";

As for the position value, try them all out with the element inspector in your browser. That is a quick way to begin to understand the effects of the possible values of the position property.

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