CODEWITHSUNDEEP
jquerycss
Scott Greenwald
Scott Greenwald

Reputation: 191

Use jQuery to remove an inline style

<div class="mydiv">
  <ul style="height:111px; width:222px;">
    ...

Is it possible with jQuery (or plain javascript) to remove just the height attribute? Note that there are several instances of .mydiv ul with varying heights.

Upvotes: 17

Views: 22824

Answers (6)

schtsch
schtsch

Reputation: 304

try this:

$('.mydiv ul').height('');

Upvotes: 2

raymondralibi
raymondralibi

Reputation: 1953

$('.mydiv ul').each(function(){
    $(this).attr('style', $(this).attr('style').replace('height: ', 'height:').replace('height:'+$(this).css('height')+';', '')); 
});

just make sure the style value format either "height:111px;" or "height: 111px;"

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

To remove an attribute, use this:

$(".mydiv UL").css("height", "");

Thanks to am not i am for correcting my answer.

Upvotes: 23

DA.
DA.

Reputation: 40673

Yes! You can!

If you set the css property to a blank value, it clears it.

So, if your inline style is "background: pink" you can remove it via:

$element.css('background','')

I'm pretty sure I learned that somewhere here on SE but, alas, don't have the specific source to site, so apologies for not being able to give credit where credit is due.

UPDATE:

Well, I suppose I should have gone to the source. From the jQuery documentation (emphasis mine):

Setting the value of a style property to an empty string — e.g. $('#mydiv').css('color', '') — removes that property from an element if it has already been directly applied, whether in the HTML style attribute, through jQuery's .css() method, or through direct DOM manipulation of the style property. It does not, however, remove a style that has been applied with a CSS rule in a stylesheet or element.

http://api.jquery.com/css/

Upvotes: 3

Kokers
Kokers

Reputation: 1828

add your style attribute to CSS and then you can add or remove class with these jQuery functions: addClass and removeClass

Upvotes: 0

Silvertiger
Silvertiger

Reputation: 1680

Yes it is .. dpeneding on how you'd like to do it

<script type="text/javascript">
    function changestyle(element) {
        var currentstyle = document.getElementById(element).style.display;
        if (currentstyle == "inline") {
            document.getElementById(element).style.display = "";
            } else {
            document.getElementById(element).style.display = "inline";
        }
    }
</script>

this may vary slightly for different broswers but it should show you how to change it if you want.

eek .. disregard .. jquery - much easier :)

Upvotes: 1

Related Questions