在javascript中使用.css（）设置细边框 [英] Set a thin border using .css() in javascript

问题描述

所以当用户点击它时，我试图在页面上的按钮周围设置边框。

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 });

我尝试了两种方法来改变那里按钮的边框颜色。第一种方法是使用.css（）函数。

I have tried 2 ways to change the border color of the buttons in there. The first way is using the .css() function.

$(this).css({"border-color": "#C1E0FF", 
             "border-weight":"1px", 
             "border-style":"solid"});

但是当我这样做时，边界真的很胖（我希望它是发际线的，就像我通常将宽度设置为1px一样）

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)

我尝试过的另一种方法是下载jquery-color插件，然后执行以下操作：

The other way I have tried is by downloading the jquery-color plugin, and doing something like:

$(this).animate({borderTopColor: "#000000"}, "fast");

当我这样做时，没有任何反应。没有错误 - 没有任何反应。但是，如果不是尝试更改边框颜色，而是尝试更改背景颜色，它工作正常....所以我使用jquery-color错误？作为参考，以下是我将如何更改背景：

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:

$(this).animate({ backgroundColor: "#f6f6f6" }, 'fast');

就像我说的那样有效。当我下载jquery-color时，我只下载了一个文件（jquery-color.js），如果这有所不同....

like I said, that works. When I downloaded jquery-color, I only downloaded the one file (jquery-color.js), if that makes a difference....

那我怎么去关于获得发际线边界？ （我更喜欢使用animate（）方法，如果你有任何方法可以使它工作）

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)

推荐答案

当前示例：

您需要定义 border-width：1px

您的代码应为：

$(this).css({"border-color": "#C1E0FF", 
             "border-width":"1px", 
             "border-style":"solid"});

建议示例：

理想情况下，理想情况下使用类和addClass / removeClass

Suggested Example:

You should ideally use a class and addClass/removeClass

$（this）.addClass（'borderClass'）;
$（this）.removeClass（'borderClass'）;

并在你的CSS中：

.borderClass{
  border-color: #C1E0FF;
  border-width:1px;
  border-style: solid;
  /** OR USE INLINE
  border: 1px solid #C1E0FF;
  **/
}

jsfiddle工作示例：http://jsfiddle.net/gorelative/tVbvF/ \

jsfiddle working example: http://jsfiddle.net/gorelative/tVbvF/\

jsfiddle with animate ： http://jsfiddle.net/gorelative/j9Xxa/
这只是给你一个如何做的例子工作，你应该明白..有更好的方法可以做到这一点..比如使用切换（）

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()

这篇关于在javascript中使用.css（）设置细边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！