jQuery中的边框底部宽度

我正在尝试使用jQuery设置边框的宽度，因此它将根据屏幕大小进行调整

我现在使用的是：

$("#content").css("border-bottom-width", "(1/20)*theHeight", "border-right-width", "(1/10)*theWidth", "border-left-width", "(1/10)*theWidth", "border-top-width", "0");

但这似乎并不奏效。我知道高度和宽度的值是填充的，所以这不成问题

我做错了什么？如果这真的是一个跛脚虫，那么我真的很抱歉成为这样一个傻瓜。

应该是这样的：

$("#content").css({"border-bottom-width": (1/20)*theHeight, "border-right-width": (1/10)*theWidth, "border-left-width": (1/10)*theWidth, "border-top-width": 0});

$("#content").css({"border-bottom-width": (1/20)*theHeight,
                   "border-right-width": (1/10)*theWidth, 
                   "border-left-width": (1/10)*theWidth, 
                   "border-top-width": 0});

$("#content").css({"border-bottom-width": theHeight/20,
                   "border-right-width": theWidth/10, 
                   "border-left-width": theWidth/10, 
                   "border-top-width": 0});

.css({"border-bottom-width": (1/20)*theHeight,
                   "border-right-width": (1/10)*theWidth, 
                   "border-left-width": (1/10)*theWidth, 
                   "border-top-width": 0});

---

问题是，首先，您使用的css（）是错误的。如果您有多个css属性，则需要将其设置为对象{key:value，key:value}。其次，如果将变量和计算放在引号中，结果将是纯文本

这是因为您的值用引号括起来，格式错误，只需删除引号并使参数成为对象，如下所示：

$("#content").css({"border-bottom-width": (1/20)*theHeight, "border-right-width": (1/10)*theWidth, "border-left-width": (1/10)*theWidth, "border-top-width": 0});

$("#content").css({"border-bottom-width": (1/20)*theHeight,
                   "border-right-width": (1/10)*theWidth, 
                   "border-left-width": (1/10)*theWidth, 
                   "border-top-width": 0});

$("#content").css({"border-bottom-width": theHeight/20,
                   "border-right-width": theWidth/10, 
                   "border-left-width": theWidth/10, 
                   "border-top-width": 0});

.css({"border-bottom-width": (1/20)*theHeight,
                   "border-right-width": (1/10)*theWidth, 
                   "border-left-width": (1/10)*theWidth, 
                   "border-top-width": 0});

的格式始终为

{key:value，key2:value2}

。为了安全起见，请引用您的密钥，因为

边框底部宽度

不是有效的密钥（因为

-

），但是

“边框底部宽度”

就可以了。您还可以将其简化一点，如下所示：

$("#content").css({"border-bottom-width": (1/20)*theHeight, "border-right-width": (1/10)*theWidth, "border-left-width": (1/10)*theWidth, "border-top-width": 0});

$("#content").css({"border-bottom-width": (1/20)*theHeight,
                   "border-right-width": (1/10)*theWidth, 
                   "border-left-width": (1/10)*theWidth, 
                   "border-top-width": 0});

$("#content").css({"border-bottom-width": theHeight/20,
                   "border-right-width": theWidth/10, 
                   "border-left-width": theWidth/10, 
                   "border-top-width": 0});

.css({"border-bottom-width": (1/20)*theHeight,
                   "border-right-width": (1/10)*theWidth, 
                   "border-left-width": (1/10)*theWidth, 
                   "border-top-width": 0});

不是这样吗：

((1/20)*theHeight)

这样做：

$("#content").css({"border-bottom-width": (1/20)*theHeight, "border-right-width": (1/10)*theWidth, "border-left-width": (1/10)*theWidth, "border-top-width": 0});

$("#content").css({"border-bottom-width": (1/20)*theHeight,
                   "border-right-width": (1/10)*theWidth, 
                   "border-left-width": (1/10)*theWidth, 
                   "border-top-width": 0});

$("#content").css({"border-bottom-width": theHeight/20,
                   "border-right-width": theWidth/10, 
                   "border-left-width": theWidth/10, 
                   "border-top-width": 0});

.css({"border-bottom-width": (1/20)*theHeight,
                   "border-right-width": (1/10)*theWidth, 
                   "border-left-width": (1/10)*theWidth, 
                   "border-top-width": 0});

---

好样的+1一般来说，解释需要更改的内容（比如你在我的答案下面的评论）是很好的，这样人们就会得到它，然后投票。@Pekka是的，谢谢，以后会考虑的。顺便说一句，现在我会给你+1，因为你的编辑：）@tbleckert-有人可能会介入并获得更多选票的原因是答案的质量，让我在这里提供一些有用的评论：1）你的代码滚动-当它可以格式化以清楚地看到发生了什么。2） 没有关于错误的解释（引号和对象文字格式）。3） 如果可能的话，还可以为用户提供进一步阅读的链接（当然是可选的）…我们想教他们钓鱼，而不是修复单个代码。记住：一旦你的答案被发布，没有什么能阻止你改进它……不幸的是，你没有做到这点。@Nick Craver谢谢你。我不编辑我的答案的原因是这里已经有很多很好的解释了。