Question

我希望将容器的背景颜色同步到其子级。感谢

这是我尝试过的，不起作用......

<script>
$(document).ready(function() {
var color = $("section").css( "background-color" );
  $('body').css("background-color", color);
});
</script>

这是我的Jquery AJAX：

<script type="text/javascript">
function getPage(id) {
$('#output').html('<img class="loader" src="/assets/img/loader.gif" />');
    jQuery.ajax({
        url: "get_page.php",
        data:'id='+id,
        type: "POST",
        ;}
    });
}
getPage(1);
</script>

我的HTML ......

<body>
<div id="output">
    <section style=";">
        <p>Bla bla bla</p>
    </section>    
</div>
</body>

来自Shomz的解决方案的工作解决方案！＆gt;

<script type="text/javascript">
$(document).ready(function() {
    updateColor();
});

function getPage(id) {
$('#output').html('<img class="loader" src="/assets/img/loader.gif" />');
    jQuery.ajax({
        url: "get_page.php",
        data:'id='+id,
        type: "POST",
        success:function(data){$('#output').html(data);updateColor();}
    });
}
function updateColor(){
    var color = $("section").css( "background-color" );
    $('body').css("background-color", color);
}
getPage(1);
</script>

Answer 1

您也可以在AJAX成功回调中调用您在文档就绪回调中调用的颜色更改代码。理想情况下，您可以将其转换为函数，并将其称为：

$(document).ready(function() {
    updateColor();
});

function getPage(id) {
$('#output').html('<img class="loader" src="/assets/img/loader.gif" />');
    jQuery.ajax({
        url: "get_page.php",
        data:'id='+id,
        type: "POST",
        }
    })
    .done(function(){
        updateColor();
    }
    // or just .done(updateColor)
}

function updateColor(){
    var color = $("section").css( "background-color" );
    $('body').css("background-color", color);
}

我没有看到您从AJAX响应数据中更新HTML的代码，但我认为这一切都很好，您的新section已定义了背景颜色

如何将页面（主体）的颜色设置为使用AJAX加载的元素的可变颜色？

1 个答案: