changing css property in Jquery

Question

below is my html page, which contains a button. in my button input.ui-button { padding: 0.4em 1em; } style is added to buttons. it is adding it from jquery-ui.css . i have to add in-line to change padding values. but i can't add this as per instruction. please suggest me is there any other way to set these values other than in-line style.

       <body>
       <input type="button" onclick="javascript:submitForm('reset');" class="ui-button- default ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" 
       value="Reset">
      </body>

You should have a separate CSS document anyway. Inline CSS is generally a bad idea. When you've got that sorted, you can use the .css() method in jQuery. — Polynomial
– Polynomial, Commented Dec 7, 2011 at 12:21
Are you using jQuery.js in your code? why are you still using onclick? — David Laberge
– David Laberge, Commented Dec 7, 2011 at 12:22
thanks polynomial, i have added it in separate .css file but it is not reflecting until i add it like inline. — Raj
– Raj, Commented Dec 7, 2011 at 12:27
@David Laberge: i am using query.min.js,query-ui.min.js . and what to use for onClick() ? please suggest. thanks — Raj
– Raj, Commented Dec 7, 2011 at 12:28

David Laberge · Accepted Answer · 2011-12-07 13:19:39Z

2

Try something like

  <body>
   <input type="button" id="btn" value="Reset">
  </body>

In Javascript:

$('#btn').button();                 // to apply the default css style of the jQuery UI boutton
$('#btn').css({'margin-left':'20px'}); // to modify the css of the element
$('#btn').click(function(){
   // This function is called when the bouton is clicked
});

edited Dec 7, 2011 at 13:19

answered Dec 7, 2011 at 13:09

David Laberge

16.1k15 gold badges56 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user447356 Over a year ago

Cheers, also please change "boutton" to "button". :)

user447356 · Accepted Answer · 2011-12-07 13:15:36Z

1

Just add your own style sheet overriding the .ui-button padding definition:

<style type="text/css">
    .ui-button {  padding: 0; }
</style>

answered Dec 7, 2011 at 13:15

user447356

Collectives™ on Stack Overflow

changing css property in Jquery

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related