JavaScript支持百分比單位嗎？

我正在嘗試根據不同的瀏覽器大小重新調整圖像大小。我使用此代碼：JavaScript支持百分比單位嗎？

document.getElementById("myImg").style.height = (document.body.clientHeight) * 0.5;

但如果我不使用DOCTYPE，如果我在HTML文件中使用DOCTYPE，那麼這是行不通的作品。有人說：

在使用有效的DTD屬性值必須有單位...

於是，我就加個單元％：

document.getElementById("myImg").style.height = (document.body.clientHeight) * 0.5 + "%";

，但它不」 t工作，它只能與px單位代替：

document.getElementById("myImg").style.height = (document.body.clientHeight) * 0.5 + "px";

如何使％單位工作，因爲它與px單位？這甚至有可能嗎？

來源

2012-02-28 XO39

如果你正在服用的身體的clientHeight，其結果是在像素（PX）。如果你乘以0.5，結果是像素數量的一半。你爲什麼要把這個數字變成一個百分比？ – Travesty3 2012-02-28 17:24:52

@ Travesty3：我並不是真的想將* px *變成百分比*％*，我只想將圖像大小設置爲窗口大小的50％。 – XO39 2012-02-28 17:33:37

你的代碼的最後一點應該可以做到這一點。到目前爲止，我使用的最簡單的方法是使用'document.documentElement.clientHeight'，這已經證明是我最好的跨瀏覽器兼容的檢查方法。請記住，如果身體長於窗口（使用滾動條），您的解決方案可能無法按預期工作。 – Travesty3 2012-02-28 17:44:19

這是一個似乎已經工作了OP的解決方案：

document.getElementById("myImg").style.height = document.documentElement.clientHeight * 0.5 +"px";

來源

2012-02-28 17:23:12 Travesty3

在這種情況下，JavaScript支持...字符串。

您的問題幾乎肯定會降至what height: 50% (for some value of 50) means。

指定百分比高度。百分比是根據生成的包含框的塊的高度來計算的。如果未明確指定包含塊的高度（即，它取決於內容高度），並且該元素沒有被絕對定位，則該值計算爲'auto'。根元素上的百分比高度與初始包含塊相關。

如果父元素的height解析爲height: auto那麼任何百分比高度也將解析爲auto。

如果您想要應用百分比高度，則需要將父元素的height設置爲其他值。如果將它設置爲百分比，那麼您需要設置祖父母的身高，等等（直到您點擊視口，該視口被認爲具有像素高度）。

這就是說，得到了主體的高度以像素爲單位，該減半，那麼粘附在端部的%聽起來像被製作非常奇怪的計算。

如果瀏覽器高100px，那麼元素將是50％。

如果瀏覽器高300px，那麼元素將是100％。

來源

2012-02-28 17:22:38 Quentin

非常感謝昆汀。正如我在上面對Travesty3的評論中提到的，我只想將圖像的大小設置爲窗口寬度和高度的50％。 – XO39 2012-02-28 17:36:32

JavaScript支持百分比單位嗎？

回答

相關問題