Javascript 如何覆盖按钮JQuery的默认样式

嗨，我正在我的页面上建立一个按钮，就像那样

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
        $( "#insert-image-button" )
            .button()
            .click(function() {
                $( "#AttachImage" ).dialog( "open" );
            });
</script>


<button id="insert-image-button">Create new user</button>

---

您可以使用jQueryUI应用不同的主题：。

正如Edgar已经指出的，您可以使用

如果您喜欢使用其中一个先前存在的主题，您可以轻松地将其包括在以下内容中：

将{version}和{theme}替换为要使用的

使用最新版本（1.8.13）和平滑度主题的示例：

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/smoothness/jquery-ui.css" type="text/css" />

---

有关jQuery UI主题和主题的更多信息，请查看。

您还可以通过css覆盖样式：

css文件：

#insert-image-button.ui-button {
   background:red ;
   border-radius: 0px;
}

---

如果自定义样式内容的实例很少，则始终可以使用内联样式，如：

<div id = 'insert-image-button' style = 'background: red; border-radius: 0px;'>
</div>

您可以在代码中的任意位置键入此内容

---

请注意，这并不会覆盖所有UI样式（内联样式更容易成功），而且对于已完成的项目可能并不完全实用。但它仍然是测试代码不同样式的方便方法。

在我的例子中，我喜欢这样做

在我的css文件中

.myDialog .ui-dialog-buttonpane .ui-dialog-buttonset .ButtonStyle {
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 1px;
    font: 10pt 'Myriad Pro Regular', sans-serif!important;
    font-weight: 800;
    color: #ffffff;
    background-color: #003668;
    border-left: 1px solid buttonhighlight;
    border-top: 1px solid buttonhighlight;
    border-right: 1px solid buttonshadow;
    border-bottom: 1px solid buttonshadow;
}

在我的javascript文件中

function ShowDialog() {

    var options = {
        width: 600,
        height: 220,
        modal: true,
        autoOpen: false,
        resizable: false,
        closeOnEscape: false,
        my: "center",
        at: "center",
        of: window,
        dialogClass: "myDialog",
        buttons:[{
            text: "Close",
            "class": "ButtonStyle",
            click:
            function(){
                // I declared theDialog  globally
                if (theDialog != null) {
                    theDialog.dialog("close");
                }
            }
        }]  
    };

    theDialog = $("#divMultipleMatchPopup").dialog(options);
    var ret = theDialog.dialog("open");
}

---

所以我的自定义css文件将覆盖Google CDN中的文件？是的，如果它包含在Google CDN之后的标题中。

$('#insert-image-button').css('background','red').css('border-radius','0px'); 

// or use the alternative notation

$('#insert-image-button').css({ 'background': 'red','border-radius': '0px'});

// you can use classes too

$('.insert-image-buttons').css({ 'background': 'red','border-radius': '0px'});

.myDialog .ui-dialog-buttonpane .ui-dialog-buttonset .ButtonStyle {
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 1px;
    font: 10pt 'Myriad Pro Regular', sans-serif!important;
    font-weight: 800;
    color: #ffffff;
    background-color: #003668;
    border-left: 1px solid buttonhighlight;
    border-top: 1px solid buttonhighlight;
    border-right: 1px solid buttonshadow;
    border-bottom: 1px solid buttonshadow;
}

function ShowDialog() {

    var options = {
        width: 600,
        height: 220,
        modal: true,
        autoOpen: false,
        resizable: false,
        closeOnEscape: false,
        my: "center",
        at: "center",
        of: window,
        dialogClass: "myDialog",
        buttons:[{
            text: "Close",
            "class": "ButtonStyle",
            click:
            function(){
                // I declared theDialog  globally
                if (theDialog != null) {
                    theDialog.dialog("close");
                }
            }
        }]  
    };

    theDialog = $("#divMultipleMatchPopup").dialog(options);
    var ret = theDialog.dialog("open");
}