使用JavaScript中的CSS()设置一个细边框(Set a thin border using

2019-07-30 01:30发布

所以我试图让按钮周围边框我的网页上,当用户点击它们。

要建立我打算处理程序:

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

我曾尝试2种方式来改变按钮的边框颜色在那里。 第一种方式是使用的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的颜色,我只下载了一个文件(jQuery的color.js),如果有差别....

那么,如何去获得极细边框? (我宁愿如果你有anyideas如何得到这工作使用动画()方法)

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: http://jsfiddle.net/gorelative/j9Xxa/这只是给你的是如何可以工作一个例子,你应该明白我的意思。有这样做最有可能的更好的方法..像使用toggle()



Answer 2:

也许只是“边框宽度”,而不是“边界重”? 没有“边界重”,并且此属性只是忽略,默认宽度来代替。



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“的消息,现在我可以对这个话题展开了几个小时的徒劳与作战后:

边框宽度是一个有效的CSS属性,但它不是在jQuery的CSS oject定义,这样的.css({边框宽度:“2px的”})包括将导致一个错误,但它是用的.css很高兴({'边界-width':‘2px的’}),想必在引号的属性名称刚过作为接收。



文章来源: Set a thin border using .css() in javascript