使用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」;

至於位置值，請使用瀏覽器中的元素檢查器全部嘗試。這是開始瞭解位置屬性可能值的影響的一種快速方法。