javascript - HTML/JS : Setting "100% auto" for background-size property truncates to "100%" but "auto 100%" does not

Question

对于 div，为什么将背景大小属性设置为“100% auto”会被 chop 为“100%”，而“auto 100%”却不会？

目标是允许 background-size 属性为“100% auto”。

“100% 自动”不同于“100%”，不是吗？

代码笔: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

如您所见here at MDN - background-size , 它清楚地表明当第二个值(即 height )不存在时，浏览器将视为 auto。

所以，我认为可以检查 $("#test1")[0].style["background-size"]< 中的 /\s/ 字符 值检查空格，如果不存在(RegExp 返回 -1 )将 auto 附加到输出以变为 100%自动。