Javascript插入图像作为div背景

Question

我正在尝试直接插入我最新的 tumblr 帖子图像作为网站上 div 的背景图像。

我可以使用此代码添加图像 src

<img border='0' style='margin:0' width='100%' id='TumblrMagic' src='' alt='' />
    <script type='text/javascript' src='http://myblog.tumblr.com/api/read/json?number=1&type=photo'></script>
    <script type='text/javascript'>
            document.getElementById('TumblrMagic').setAttribute('src', tumblr_api_read.posts[0]['photo-url-500']);
    /script>

但出于风格原因，我希望能够将其作为 div 的背景图像。我正在研究这个问题

<div id="TumblrMagic"></div>
<script type='text/javascript'>
        document.getElementById('TumblrMagic').css('background-image', 'url(' + imageUrl + ')');
</script>

现在我尝试将 imageUrl 替换为加载图像的代码 tumblr_api_read.posts[0]['photo-url-500'] 但我'我的 JavaScript 不太流利。有人可以帮我吗？

Answer 1

将 img 元素附加到 div:

<script type='text/javascript'>
    var div = document.getElementById('TumblrMagic');
    var image = document.createElement("img");
        image.src = tumblr_api_read.posts[0]['photo-url-500'];
    div.appendChild(image);
</script>

或将背景图片设置为div:

<script type='text/javascript'>
    var  image = tumblr_api_read.posts[0]['photo-url-500'];
    var div = document.getElementById('TumblrMagic');
        div.style.backgroundImage = 'url(' + image + ')';
        div.style.width = '100%'; //change it or apply by CSS
        div.style.height = '768px'; //change it or apply by CSS
    </script>