在javascript中使用.css（）设置细边框

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

要设置处理程序，我将执行以下操作：

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

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

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

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

我尝试的另一种方法是下载jquery颜色插件，并执行以下操作：

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

当我这么做的时候，什么也没发生。没有错误，只是什么都没有发生。但是，如果我不尝试更改边框颜色，而是尝试更改背景颜色，那么效果很好……那么我使用jquery颜色是不是错了？以下是我将如何更改背景以供参考：

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

就像我说的，这很有效。当我下载jquery color时，我只下载了一个文件（jquery color.js），如果这有区别的话

那么，我该如何获得发际线边界呢？（如果您有任何想法，我更愿意使用animate（）方法）

可能只是“边框宽度”而不是“边框重量”？没有“边框权重”，只会忽略此属性，而使用默认宽度。

当前示例： 您需要定义

边框宽度：1px

您的代码应为：

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

建议的例子： 理想情况下，您应该使用一个类和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;
  **/
}

JSFIDLE工作示例：\

带动画的JSFIDLE：
这只是给你一个如何工作的例子，你应该明白。。很可能有更好的方法可以做到这一点。。就像使用
toggle（）
一样，我建议使用类而不是设置css属性。因此，与此相反：

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

定义css类：

.border 
{ 
  border-color: #C1E0FF; 
  border-width:1px; 
  border-style:solid; 
}

然后将javascript更改为：

$(this).addClass("border");

在与一辆卡车搏斗了几个小时之后
“SyntaxError:missing:after property id”消息我现在可以展开此主题：

border width是有效的css属性，但它未包含在jQuery css项目定义中，因此.css（{border width:'2px'}）将导致错误，
但是它对.css（{'border-width'：'2px'}）很满意，大概引号中的属性名称只是在接收时传递的。
你的意思是
border-width
？我建议使用类而不是设置css属性。@jrummell你能说得更具体一点吗？哇，这真是太巧妙了。当我在google中输入“jquery更改边框颜色”或类似的内容时，究竟为什么没有出现这种情况？！？！？！？！！我添加了一个JSFIDLE，所以你可以在操作中看到它。如果你好奇的话，我添加了动画JSFIDLE+1，因为我总是忘记这一点，而且总是要用谷歌搜索，只为了一次又一次地到达这里@gorelative why dint您只需使用
$（this）.css（{“border”：“1px solid#C1E0FF”}）而不是调用所有属性