29

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

要设置我要去的处理程序:

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

我尝试了 2 种方法来更改其中按钮的边框颜色。第一种方法是使用 .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() 方法)

4

4 回答 4

73

当前示例:

你需要定义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:http: //jsfiddle.net/gorelative/j9Xxa/ 这只是给你一个例子,说明它是如何工作的,你应该明白了.. 最有可能有更好的方法来做到这一点.. 比如使用toggle()

于 2012-06-19T17:33:54.633 回答
6

我建议使用类而不是设置 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");
于 2012-06-19T17:38:48.547 回答
5

也许只是“边框宽度”而不是“边框重量”?没有“border-weight”,这个属性被忽略,而是使用默认宽度。

于 2012-06-19T17:32:12.073 回答
0

在与“SyntaxError: missing : after property id”消息斗争了几个小时后,我现在可以扩展这个主题:

border-width 是一个有效的 css 属性,但它不包含在 jQuery css oject 定义中,所以 .css({border-width: '2px'}) 会导致错误,但 .css({'border -width': '2px'}),大概是引号中的属性名称只是按接收方式传递。

于 2015-02-21T15:36:23.673 回答