Javascript 插入图像作为 div 背景

Question

我正在尝试插入我最新的 tumblr post 图片作为我网站上 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>

现在，我正在尝试用加载图像的代码 tumblr_api_read.posts[0]['photo-url-500'] 替换 imageUrl，但我不熟悉 javascript。谁能帮帮我？

Answer 1

试试这个：

var imageUrl = tumblr_api_read.posts[0]['photo-url-500'];

Answer 2

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

Javascript 插入图像作为 div 背景

Javascript insert image as a div background

javascript

background-image

tumblr