如何更改""<Div>及其父""的高度<Td>

Question

我在第三方应用程序中有以下标记。 现在对于这个第三部分的应用程序，我可以针对生成的标记编写自定义 JavaScript 和自定义 css。

<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>

那么我如何修改 <div> 及其父<td>的高度属性从 style="height:75px" 到 style="height:0px" ？

Answer 1

这将

选择所有<td>元素，以及直接位于<td>内的所有<div>元素，并使其高度0px

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

首先尝试一下，但是，我怀疑这会选择比您预期的更多的东西，具体取决于此页面上的其他内容。

如果所有div 元素的 ID 都以 MSOPictureLibrarySlideshowWebPart 开头，则可以从那里开始，选择所有这些元素，然后查找父元素。 查看 jquery 文档，了解如何进行部分属性匹配。

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

Answer 2

使用 .css((！
你可以找到每个<td>，并使用 .find(( 获取其中的 <div> 元素。

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

Answer 3

您可以使用对元素的设置max-height:0来使用父类设置高度 0

堆栈代码段

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>