在 javascript 中使用 .css() 设置细边框

因此，当用户单击页面上的按钮时，我试图在按钮周围设置边框。

要设置处理程序，我要：

$(".reportButtons").click(function(){ //change border color });

我尝试了两种方法来更改其中按钮的边框颜色。第一种方法是使用 .css() 函数。

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

但是当我这样做时，边框真的很粗（我希望它是细线，就像我将宽度设置为 1px 时通常会出现的那样）

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

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

当我这样做时，什么也没有发生。没有错误——只是什么也没发生。但是，如果我不尝试更改边框颜色，而是尝试更改背景颜色，则效果很好......那么我使用的 jquery-color 是否错误？作为参考，以下是我更改背景的方法：

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

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

那么如何获得发际线边框呢？ （如果您有任何想法如何使其发挥作用，我更愿意使用 animate() 方法）

当前示例：

你需要定义border-width:1px

您的代码应为：

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

建议示例：

理想情况下，您应该使用类并添加类/删除类

$(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/ http://jsfiddle.net/gorelative/tVbvF/\

jsfiddle 与动画：http://jsfiddle.net/gorelative/j9Xxa/ http://jsfiddle.net/gorelative/j9Xxa/这只是给你一个例子，说明它是如何工作的，你应该明白这个想法..很可能有更好的方法来做到这一点..比如使用toggle()