jQuery-UI : Dialog remove class

Question

Hello,

I have a dialog box, created with the code javascript and HTML generated below. I'd like remove the class "ui-button-text-only" for the buttons and for the container add "style=font-size: 0.9em;"

Could you help me ?

Thanks,

HTML :

<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
    <button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button">
        <span class="ui-button-text">Save</span>
    </button>
    <button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button">
        <span class="ui-button-text">Cancel</span>
    </button>
    <button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button">
        <span class="ui-button-text">Delete</span>
    </button>
</div>

Javascript :

<div id="dialogProduct" title="MyTitle"></div>
<script type="text/javascript">
function CreateDialogProduct() {
    $("#dialogProduct").dialog({
        bgiframe: true, autoOpen: false, minHeight: 350, maxHeight: 450, height: 350,
        minWidth: 450, maxWidth: 550, width: 450,
        modal: true,
        buttons: {
            Save: function() {
                $.ajax({
                    type: "POST",
                    url: "/Product/SaveOrUpdate",
                    data: {...},
                    success: function(data) {...},
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                    }
                })
            },
            Cancel: function() {...},
            Delete: function() {
                $.ajax({
                    type: "POST",
                    url: "/Product/Delete",
                    data: {...},
                    success: function(data) {},
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                    }
                })
            }
        },
        beforeclose: function(event, ui) {
        }
    });
}    
jQuery(document).ready(function() {
    CreateDialogProduct();
});
</script>

Answer 1

$('button').removeClass("ui-button-text-only");
$('button:parent').css('font-size', '0.9em');

//or if you want to do it in a single line:
$('button').removeClass("ui-button-text-only").parent().css('font-size', '0.9em');

---

Reply to comment: If you have a CSS class like:

.small{
  font-size:0.9em;
}

in an included CSS file, you can do the following instead:

$('button').removeClass("ui-button-text-only").parent().addClass('small');