在 javascript 中使用 .css() 设置细边框

Posted 2023-02-23

【中文标题】在 javascript 中使用 .css() 设置细边框

【英文标题】：Set a thin border using .css() in javascript

【发布时间】：2012-06-21 19:14:13

【问题描述】：

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

设置我要去的处理程序：

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

【问题讨论】：

你的意思是border-width？

我建议使用类而不是设置 css 属性。

@jrummell 你能说得更具体点吗？

【参考方案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()

【讨论】：

哇，这真是太棒了。为什么当我在 google 中输入“jquery 更改边框颜色”或类似内容时，这不会出现在地球上？！？！？！？！！

我添加了一个 jsfiddle，以便您可以看到它的实际效果

如果你好奇的话，我添加了动画 jsfiddle

+1 因为我总是忘记这一点，而且总是不得不谷歌才能再次到达这里，一次又一次！！！

@gorelative 为什么你只使用$(this).css("border": "1px solid #C1E0FF"); 而不是调用所有属性

【参考方案2】：

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

【参考方案3】：

也许只是“border-width”而不是“border-weight”？没有“border-weight”，只是忽略了这个属性，而是使用默认宽度。

【参考方案4】：

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

border-width 是一个有效的 css 属性，但它不包含在 jQuery css oject 定义中，所以 .css(border-width: '2px') 会导致错误， 但它对 .css('border-width': '2px') 很满意，大概是引号中的属性名称只是按原样传递。