HTML / JS：將背景尺寸屬性的“ 100％自動”設置為“ 100％”會被截斷，但“自動100％”不會

Question

對於div，為什么將background-size屬性的“ 100％auto”設置為“ 100％”會被截斷，而“ auto 100％”卻不會呢？

目標是為background-size屬性允許“ 100％自動”。

“ 100％自動”與“ 100％”不同，不是嗎？

Codepen： https ：//codepen.io/anon/pen/xMLXKz ？ editors = 1111

<div id="test1"></div>
<div id="test2"></div>

div {
  width: 200px;
  height: 200px;
  background: blue;
}

$("#test1")[0].style["background-size"] = "100% auto";
$("#test2")[0].style["background-size"] = "auto 100%";

console.log($("#test1")[0].style["background-size"]);
console.log($("#test2")[0].style["background-size"]);

console.log("Done")

輸出：

"100%"
"auto 100%"
"Done"

Answer 1

正如您可以在MDN-background-size此處檢查的那樣，它清楚地說明，如果缺少第二個值（即height），瀏覽器將視為auto 。

因此，我認為可以在$("#test1")[0].style["background-size"]值中檢查/\\s/字符以檢查空格，如果不存在（RegExp返回-1 ）將auto附加到輸出中以成為100% auto 。