因此,当用户单击页面上的按钮时,我试图在按钮周围设置边框。
要设置我要执行的处理程序:
$(".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() 方法)
最佳答案
当前示例:
您需要定义border-width:1px
您的代码应为:
$(this).css({"border-color": "#C1E0FF",
"border-width":"1px",
"border-style":"solid"});
建议示例:
理想情况下,您应该使用类并添加类/删除类
$(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()
关于javascript - 在 javascript 中使用 .css() 设置细边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11106205/