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 。