Using Google Chrome Developer Tools I uncheck "float:none;" from the Styles inspector and my DOM element lines up properly. A OK! However, if try to use jQuery to remove the style via $('#div_appointment_time_picker').removeAttr('float'); or $('#div_appointment_time_picker').removeProperty('float'); respectively (removeAttr and removeProperty) neither of which seem to work. So, basically, how can I programmatically "re-create" what occurs in Google Chrome by unchecking the property in the Style inspector (see img below)

Using Google Chrome Developer Tools I uncheck "float:none;" from the Styles inspector and my DOM element lines up properly. A OK! However, if try to use jQuery to remove the style via $('#div_appointment_time_picker').removeAttr('float'); or $('#div_appointment_time_picker').removeProperty('float'); respectively (removeAttr and removeProperty) neither of which seem to work. So, basically, how can I programmatically "re-create" what occurs in Google Chrome by unchecking the property in the Style inspector (see img below)

• javascript
• jquery
• html
• css
• google-chrome

• 1 try using, $('#div_appointment_time_picker').css("float", "none"); – Talha Tanveer Commented Jan 8, 2015 at 17:45

4 Answers 4

You can use .css() to change css attributes:

$('#div_appointment_time_picker').css("float", "none");

or to edit multiple properties you can use:

$('#div_appointment_time_picker').css({"float" : "none", "another-rule": "value"});

Float isn't an attribute or property of the element like width or ID is, it's a style property, so you'd have to use $('#div_appointment_time_picker').css('float','none');

$('#div_appointment_time_picker').css('float', 'you are a wizard harry');

Use jQuery method .css();

It works like .css(property, value) or .css({property: value})

For example, in your case it would be:

$('#div_appointment_time_picker').css('float', 'initial'); // or 'none'

Read more about float: https://developer.mozilla/en-US/docs/Web/CSS/float