使用Javascript设置CSS位置

Setting CSS position using Javascript

本文关键字：位置 CSS 设置 Javascript 使用      更新时间：2023-09-26

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

我试过了：

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

但它似乎不起作用。。。

您必须单独设置它们。

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

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

var elementStyle = document.getElementById("id").style;
elementStyle.position = "relative";
elementStyle.top = elementStyle.left = "50%";

jsFiddle。

我执行以下操作将元素置于其父元素的中心，父元素可以是主体或另一个分部。

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

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

我只是做了一个搜索，看看position属性是否可以接受你在问题中显示的50%这样的值——它不能。

我检查了一下，以确保CSS中添加了一些新的内容，允许将位置设置为以下内容之外的内容。我想，也许我对position可以采用的值是错误的（并且可以做任何事情——你总是可以为各种属性编码任何值，而不是它们想要的值，但它们不会做任何事情）。我看不出有什么东西表明职位可以有50%的价值，并实际有所作为。

位置属性的可能值为：

相对

固定

绝对

静态

继承

或者你可以把它从元素中去掉。根据我所看到的position:static的行为与您没有为元素或类编码position属性的行为相同。

请阅读此处的位置

position属性可能会让人困惑，直到你看到不同值对元素位置的影响——即使这样，它也并不总是清晰的。

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

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

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

您可以使用浏览器的"检查元素"功能"玩"属性值。我认为所有主要的浏览器都有这样的功能。请阅读本页关于"检查"

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

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

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

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

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

笔记非常重要！

要重述-将一个元素放在其父元素的中心，请用元素的id编码如下-替换的elementid。

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

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

相关文章：