在 javascript 中使用 .css() 设置细边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11106205/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set a thin border using .css() in javascript
提问by Toadums
So I am trying to get a border around buttons on my page when the user clicks them.
因此，当用户单击它们时，我试图在我的页面上的按钮周围设置边框。
To set up the handler I am going:
要设置处理程序，我将：
$(".reportButtons").click(function(){ //change border color });
I have tried 2 ways to change the border color of the buttons in there. The first way is using the .css() function.
我尝试了 2 种方法来更改其中按钮的边框颜色。第一种方法是使用 .css() 函数。
$(this).css({"border-color": "#C1E0FF",
"border-weight":"1px",
"border-style":"solid"});
But when I do it this way, the border is really fat (I want it to be hairline, like it normally would be if I set the width to 1px)
但是当我这样做时，边框真的很胖（我希望它是细线，就像我将宽度设置为 1px 一样）
The other way I have tried is by downloading the jquery-color plugin, and doing something like:
我尝试过的另一种方法是下载 jquery-color 插件，然后执行以下操作：
$(this).animate({borderTopColor: "#000000"}, "fast");
When I do that, nothing happens. There is no error - just nothing happens. But if instead of trying to change the border color, I try to change the background color, it works fine....so am I using the jquery-color wrong? For reference, here is how I would change the background:
当我这样做时，什么也没有发生。没有错误 - 只是没有任何反应。但是，如果我没有尝试更改边框颜色，而是尝试更改背景颜色，则效果很好....那么我使用 jquery-color 是错误的吗？作为参考，这是我将如何更改背景：
$(this).animate({ backgroundColor: "#f6f6f6" }, 'fast');
like I said, that works. When I downloaded jquery-color, I only downloaded the one file (jquery-color.js), if that makes a difference....
就像我说的，那行得通。当我下载 jquery-color 时，我只下载了一个文件 (jquery-color.js)，如果这有区别的话......
So how do I go about getting a hairline border? (I would prefer to use the animate() method if you have anyideas how to get that to work)
那么我该如何获得发际线边框呢？（如果您有任何想法如何让它工作，我更喜欢使用 animate() 方法）
回答by gorelative
Current Example:
当前示例：
You need to define border-width:1px
你需要定义 border-width:1px
Your code should read:
你的代码应该是：
$(this).css({"border-color": "#C1E0FF",
"border-width":"1px",
"border-style":"solid"});
Suggested Example:
建议示例：
You should ideally use a class and addClass/removeClass
理想情况下，您应该使用类和 addClass/removeClass
$(this).addClass('borderClass');$(this).removeClass('borderClass');
$(this).addClass('borderClass');$(this).removeClass('borderClass');
and in your CSS:
在你的 CSS 中：
.borderClass{
border-color: #C1E0FF;
border-width:1px;
border-style: solid;
/** OR USE INLINE
border: 1px solid #C1E0FF;
**/
}
jsfiddle working example: http://jsfiddle.net/gorelative/tVbvF/\
jsfiddle 工作示例：http: //jsfiddle.net/gorelative/tVbvF/\
jsfiddle with animate: http://jsfiddle.net/gorelative/j9Xxa/This just gives you an example of how it could work, you should get the idea.. There are better ways of doing this most likely.. like using a toggle()
jsfiddle with animate: http://jsfiddle.net/gorelative/j9Xxa/这只是给你一个例子说明它是如何工作的，你应该明白..有更好的方法来做到这一点最有可能......就像使用toggle()
回答by jrummell
I'd recommend using a class instead of setting css properties. So instead of this:
我建议使用类而不是设置 css 属性。所以而不是这个：
$(this).css({"border-color": "#C1E0FF",
"border-width":"1px",
"border-style":"solid"});
Define a css class:
定义一个css类：
.border
{
border-color: #C1E0FF;
border-width:1px;
border-style:solid;
}
And then change your javascript to:
然后将您的 javascript 更改为：
$(this).addClass("border");
回答by ioseb
Maybe just "border-width" instead of "border-weight"? There is no "border-weight" and this property is just ignored and default width is used instead.
也许只是“边框宽度”而不是“边框重量”？没有“border-weight”，这个属性被忽略，而是使用默认宽度。
回答by Robin Pinguey
After a few futile hours battling with a 'SyntaxError: missing : after property id' message I can now expand on this topic:
在与“SyntaxError: missing : after property id”消息搏斗了几个徒劳的小时后，我现在可以扩展这个主题：
border-width is a valid css property but it is not included in the jQuery css oject definition, so .css({border-width: '2px'}) will cause an error, but it's quite happy with .css({'border-width': '2px'}), presumably property names in quotes are just passed on as received.
border-width 是一个有效的 css 属性，但它不包含在 jQuery css 对象定义中，因此 .css({border-width: '2px'}) 会导致错误，但它对 .css({'border -width': '2px'})，大概是引号中的属性名称只是按接收方式传递。
