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

Question

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

要设置我要处理的处理程序：

$(".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（）方法）

Answer 1

当前示例：

您需要定义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 with animate： http ： //jsfiddle.net/gorelative/j9Xxa/这只是给你一个如何工作的例子，你应该得到这个想法..有更好的方法来做到这一点...比如使用toggle()

Answer 2

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

Answer 3

我建议使用类而不是设置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");

Answer 4

经过几个徒劳的小时与'SyntaxError：missing：after property id'消息后，我现在可以扩展这个主题了：

border-width是一个有效的css属性，但它不包含在jQuery css oject定义中，所以.css（{border-width：'2px'}）会导致错误，但它对.css（{'border -width'：'2px'}），可能是引号中的属性名称只是在收到时传递。