CODEWITHSUNDEEP
javascriptjquerycss
John John
John John

Reputation: 1

How to change the height of a `<Div>` and its parent `<Td>`

I have the following mark-up inside a third part application. now for this third part application, I can write custom JavaScript and custom css against the generated markup.

<td style="height:75px">
        <div style="height: 75px; opacity: 0.99;" id="MSOPictureLibrarySlideshowWebPart_ctl00_ctl40_g_79ca5882_ef72_482a_9f70_94b4a8c6804e_text">
        <span id="MSOPictureLibrarySlideshowWebPart_ctl00_ctl40_g_79ca5882_ef72_482a_9f70_94b4a8c6804e_title" class="ms-slideshow-title"></span><br>
        </div>
</td>

So how I can modify the height property, for the <div> and its parent <td> from style="height:75px" to style="height:0px"??

Upvotes: 0

Views: 112

Answers (3)

Bhuwan
Bhuwan

Reputation: 16855

You can use set max-height:0 to the elements to set height 0 using your parent class

Stack Snippet

td,
div {
  background: red;
  max-height: 0;
}
<td style="height:75px">
  <div style="height: 75px; opacity: 0.99;" id="MSOPictureLibrarySlideshowWebPart_ctl00_ctl40_g_79ca5882_ef72_482a_9f70_94b4a8c6804e_text">
    <span id="MSOPictureLibrarySlideshowWebPart_ctl00_ctl40_g_79ca5882_ef72_482a_9f70_94b4a8c6804e_title" class="ms-slideshow-title"></span><br>
  </div>
</td>

Upvotes: 0

Chris Barr
Chris Barr

Reputation: 34012

This would select all <td> elements, and all <div> elements that are directly inside a <td> and make their height 0px

$("td, td > div").height(0);

Try this first, but, I suspect this will select more things than you intend it to depending on what else is on this page.

If all the div elements have an ID that begins with MSOPictureLibrarySlideshowWebPart then you can start from there by selecting all of those, and then finding the parent elements. Check the jquery docs for how to do partial attribute matching.

$("div[id^='MSOPictureLibrarySlideshowWebPart']").each(function() {
  $(this).height(0).parent().height(0);
});

Upvotes: 2

KL_
KL_

Reputation: 1513

Use .css()!
You can find each <td>, and use .find() to get the <div> element inside of it.

$('td').each(function(){
  $(this).css('height', '0px');
  $(this).find('div').css('height', '0px');
});

Upvotes: 0

Related Questions