Javascript 如何向jquery按钮添加边框

我正在尝试向jquery按钮添加边框。我的代码是：

JSP页面同时具有css和javascript

<style type="text/css">
    .borderClass{
        border-color: #C1E0FF;
        border-width:1px;
        border-style: solid;
}
</style>
<script language="JavaScript" type="text/javascript">
    function xxx() {
        jQuery("#completedInformation").dialog({
            buttons: {
                Cancel: function() {
                     jquery( this ).addClass('borderClass');
                 jQuery("#completedInformation").dialog( "close" );
            }
            }  
        });
    }
</script>

.边境班{
边框颜色：#C1E0FF；
边框宽度：1px；
边框样式：实心；
}
函数xxx（）{
jQuery（“完成信息”）对话框({
按钮：{
取消：函数（）{
jquery（this.addClass（'borderClass'）；
jQuery（“完成信息”）.dialog（“关闭”）；
}
}  
});
}

---

请建议我。

您可以将类添加到按钮的“in”对话框中-

function xxx() 
{
    jQuery("#completedInformation").dialog({
         buttons: [{
               Cancel: function() {                         
                     jQuery("#completedInformation").dialog( "close" );
               },
             'class':'borderClass'
         }]  
    });
}

有关更多信息，请参阅

通过添加

，您可以确保您的自定义样式不会被jqueryui样式覆盖！重要信息

到css规则

.borderClass{
  border-color: #ff0000 !important;
  border-width:1px !important;
  border-style: solid !important;
}

或者正如谢尔盖·科切托夫所建议的那样-

#completedInformation .borderClass{
  border: 1px solid #C1E0FF;
}

试试这个

 jQuery("#completedInformation").dialog({
         buttons: [{
               Cancel: function() {                         
                     jQuery("#completedInformation").dialog( "close" );
               },
             'class':'borderClass'
         }]  
    });

这可能会有帮助：

<style>
    .toggler { width: 500px; height: 200px; position: relative; }
    #button { padding: .5em 1em; text-decoration: none; }
    #effect { width: 240px;  padding: 1em;  font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; }
    .newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }
  </style>
  <script>
  $(function() {
    $( "#button" ).click(function() {
      $( "#effect" ).addClass( "newClass", 1000, callback );
      return false;
    });

    function callback() {
      setTimeout(function() {
        $( "#effect" ).removeClass( "newClass" );
      }, 1500 );
    }
  });
  </script>

.toggler{宽度：500px；高度：200px；位置：相对；}
#按钮{填充：.5em 1em；文本装饰：无；}
#效果{宽度：240px；填充：1em；字体大小：1.2em；边框：1px实心#000；背景：#eee；颜色：#333；}
.newClass{文本缩进：40px；字母间距：.4em；宽度：410px；高度：100px；填充：30px；边距：10px；字体大小：1.6em；}
$（函数（）{
$（“#按钮”）。单击（函数（）{
$（“#效应”）.addClass（“newClass”，1000，回调）；
返回false；
});
函数回调（）{
setTimeout（函数（）{
$（“效果”）.removeClass（“新类”）；
}, 1500 );
}
});

在设置所有样式更改的动画时向元素添加类

来源：

使用，因此无需为按钮定义其他类

CSS:

---

小提琴：这对我来说很有效。这是从

您还可以：

在浏览器中使用开发者工具（Chrome有很棒的工具）

查看jqueryui中定义按钮颜色的类

在CSS文件中使用“！important”属性覆盖它

例如，当我需要覆盖jQuery UI微调器控件并删除边框时，我找到了使用Chrome开发工具定义边框的类。然后在CSS中：我添加了如下内容：

。{边界：0px！重要；}

---

很好

-1不起作用。该样式被jQuery UI CSS覆盖。-1不起作用。该样式被jQuery UI CSS覆盖。@iambriansreed。。如何禁用此“borderClass”的jQuery UI CSS？@iambriansreed谢谢-修复@您好-除非从HTML中删除css样式，否则无法禁用它，但可以使用

覆盖它！重要信息

或使用更具体的选择器。在@MoazzamKhan上阅读更多关于CSS选择器的信息。注意：

#completedInformation.ui对话框按钮面板按钮

不工作。

…这可能也没有帮助。

这仍然不能回答OP的问题。顺便问一下，伪类有多少？

#completedInformation ~ .ui-dialog-buttonpane button {
    border: #f00 1px solid;
}