在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工作示例:http://jsfiddle.net/gorelative/tVbvF/ \

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