Question

我的设计中有一个右侧边栏，可以动态提取推荐书，如果有的话。

HTML看起来像：

<h4> dynamic content</h4>

这是我的CSS：

#testimonials {
    background: #eeeeee; 
    padding: 30px; 
    width: auto; 
    height: auto;
}

#testimonials h4{
    font-size: 20px;
    line-height: 30px;
    font-family: "freight-big-pro";
    font-style: italic; 
    border-bottom: 1px solid #666; 
    padding-bottom: 20px; 
    padding-top: 20px;
}

#testimonials h4 strong{
    display: block; 
    font-family:"freight-sans-pro", sans-serif; 
    font-style: normal; 
    font-size: 12px; 
}

问题是，当<h4>元素中没有内容时，样式仍然被拾取并添加CSS中指定的背景和边框。我假设它正在产生h4。如果没有任何内容，有没有办法让它变空？

更新

我正在尝试这个，它似乎在jsfiddle中工作，但不在文件中：

<script type="text/javascript"> $(document).ready(function(){ if ($("#testimonials").text().length < 65) { $('#testimonials').hide(); } });</script>

我认为它将HTML内部计为文本。

Answer 1

更新

这是另一个 JsFiddle ，但这也可能不适用于OP，因为它使用jQuery。

的jQuery

//onload:
checkStyle();   

//checks if the h4 is empty, and hides the whole div if so.
function checkStyle ()
{
    if ($('#testimonials h4').is(':empty')) 
        $('#testimonials').hide();
    else 
        $('#testimonials').show();    
}

<小时/> 这不一定适用于提问者所寻求的内容，但可能对未来的读者有益。它不是为h4设置样式，而不是op想要的父div。

假设你对CSS3没问题，并且<h4>字面上是空的，你可以修改你的CSS以使用:not和:empty选择器。

CSS

#testimonials h4:not(:empty) {
    font-size: 20px;
    line-height: 30px;
    font-family:"freight-big-pro";
    font-style: italic;
    border-bottom: 1px solid #666;
    padding-bottom: 20px;
    padding-top: 20px;
}
#testimonials h4:not(:empty) strong {
    display: block;
    font-family:"freight-sans-pro", sans-serif;
    font-style: normal;
    font-size: 12px;
}

这是 JsFiddle 。您可以向h4添加内容以查看其工作原理。

或者，您甚至可以执行相反的操作，并为空display:none;设置<h4>：

#testimonials h4:empty{
    display:none;
}

Answer 2

在CSS中为#testimonials提供display: none;属性;然后，在用于提取推荐书的任何Javascript代码完成之前，让它检查它是否实际检索到任何内容，并在display: block;上设置#testimonials，如果是的话。

有些相关：在Stack Overflow上提问时，最好发布尽可能多的信息，例如你用来动态检索推荐书的代码 - 问题中提到了它，它的行为影响了你的''重新询问，这使得它在范围内。如果您使用您的推荐检索代码更新您的问题，我会更新我的答案以显示特定的解决方案。

Answer 3

当没有内容时，最初在你的css上显示：none。使用javascript或jquery显示内容。显示内容时将应用样式。

最初没有内容时： #testimonials { background: #eeeeee; padding: 30px; width: auto; height: auto; display :none; }

动态生成内容时使用： $("#testimonials").show();

Answer 4

当不需要时，这似乎很多正面工作。如果您能够将内容输出到h4，那么您就可以输出和附加标记。

<section id="testimonials"></section>

服务器端推出：

<h4>all my content</h4>

然后你的CSS将无需js的任何工作。

您最有可能每个推荐书都有一个？

样式化空HTML标记

4 个答案:

更新

的jQuery

CSS