在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颜色错误？作为参考，以下是我将如何更改背景：

 $(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"});

理想情况下，您应该使用类和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 with animate： http ： //jsfiddle.net/gorelative/j9Xxa/这只是给你一个如何工作的例子，你应该得到这个想法..有更好的方法这样做最有可能..比如使用toggle()

也许只是“边框宽度”而不是“边框重量”？没有“border-weight”，只会忽略此属性，而是使用默认宽度。

我建议使用类而不是设置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 oject定义中，所以.css（{border-width：’2px’}）会导致错误，但它对.css（{‘border -width’：’2px’}），大概是引号中的属性名称只是按原样传递。