Question

对于div，为什么将background-size属性的“ 100％自动”设置为“ 100％”会被截断，而“自动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

您可以检查here at MDN - background-size，它清楚地表明当第二个值（即height）不存在时，浏览器将视为auto。

因此，我认为可以在您的/\s/值中检查一个$("#test1")[0].style["background-size"]字符来检查空格，如果不存在空格（RegExp返回-1） auto变成输出100% auto。

HTML / JS：将背景尺寸属性的“ 100％自动”设置为“ 100％”会被截断，但“自动100％”不会

1 个答案: