html - 如何根据子 div 的存在将背景图像设置为最外层的 div？

Question

html就像： -

<div class="mainWrapper">
<div id="left"></div>
<div id="right"></div>
</div>

CSS：-

.mainWrapper
{
background-color: #FFF;
overflow: auto;
min-height: 500px;
} 
#left
{
float: left;
padding: 0;
width: 182px;
}   
#right
{
float: left;
padding: 20px;
width: 500px;
}   
.twoColumns
{
background-color: #FFF;
overflow: auto;
min-height: 500px;
border: 0px solid black;
overflow: auto;
background-image: url(/image.jpg);
background-repeat: repeat-y;
background-position: top left;
}

如果id=left的div 存在，css 类“twoColumns”将被添加到“mainWrapper”类。背景图像（颜色#363636）将被赋予最外层的div。如果在准备好的文档中添加了 css 类（twoColumns）（取决于#left 存在），则从服务器获取图像需要时间。如何根据子 div 的存在将背景图像添加到最外层 div？任何解决这个问题的想法/建议都会受到称赞。

Answer 1

我建议从一开始就将图像放入包装器中，然后在您各自的条件下将其删除。所有这一切都可以通过一点 css 更改和 javascript 轻松实现：

CSS：

.mainWrapper
{
background-color: #FFF;
overflow: auto;
min-height: 500px;
    background-image: url(http://www.psdgraphics.com/wp-content/uploads/2009/02/abstract-background.jpg);
} 
#left
{
float: left;
padding: 0;
width: 182px;
}   
#right
{
float: left;
padding: 20px;
width: 500px;
}   
.twoColumns
{
background-color: #FFF;
overflow: auto;
min-height: 500px;
border: 0px solid black;
overflow: auto;
background-repeat: repeat-y;
background-position: top left;
}​

JS/jQuery：

$(document).ready(function(){
    if($(".mainWrapper #left").length == 0){
        $(".mainWrapper").css({'background-image':'none'});
    }

});​

这是小提琴