使用 JS ID 作为 html 中的背景图片 url [重复]答案

【问题标题】：Using JS ID as Background Image url in html [duplicate]使用 JS ID 作为 html 中的背景图片 url [重复]
【发布时间】：2020-08-26 05:16:57
【问题描述】：

这是我的第一篇文章，如有重复请见谅。

我正在尝试根据一天中的时间更改 HTML 文档的背景图像。到目前为止，我通过 document.write 实现了这一点，但是，输出不是我可以使用 CSS 响应布局（封面/包含或宽度：100vh 高度 100vh）的图像。

我工作的代码如下：

 <html>
<head>
<style>
</style>
</head>
<script>
    var myDate = new Date();
    var hrs = myDate.getHours();

    var backgroundimage;

   if (hrs < 12)
        document.write("<img src='/images/TomasGR/bg-by-time/background-daytime/images/morning.jpg'>");
    else if (hrs >= 12 && hrs <= 17)
        document.write("<img src='/images/TomasGR/bg-by-time/background-daytime/images/afternoon.jpg'");
    else if (hrs >= 17 && hrs <= 24)
        document.write("<img src='/images/TomasGR/bg-by-time/background-daytime/images/evening.jpg'>");

    backgroundimage
</script>
</html>

所以我尝试修改代码，以便可以将标签用作 URL，但最终结果只是根据一天中的时间显示文件的路径。

    <html>
<head>
</head>
<style>
</style>
<body>
<div id="lblbackgroundimage"></div>
</body>
<script>
    var myDate = new Date();
    var hrs = myDate.getHours();

    var backgroundimage;

    if (hrs < 12)
        backgroundimage = '/images/TomasGR/bg-by-time/background-daytime/images/morning.jpg';
    else if (hrs >= 12 && hrs <= 17)
        backgroundimage = '/images/TomasGR/bg-by-time/background-daytime/images/afternoon.jpg)';
    else if (hrs >= 17 && hrs <= 24)
        backgroundimage = '/images/TomasGR/bg-by-time/background-daytime/images/evening.jpg';

    document.getElementById('lblbackgroundimage').innerHTML =
       backgroundimage;
</script>
</html>

我已经阅读了许多类似的帖子，但我不知道该怎么做或我做错了什么。

任何帮助将不胜感激。

PS。我在 CMS 中将其作为 HTML 模块插入。

【问题讨论】：

你必须使用background-image属性而不是修改innerHTML。建议您阅读stackoverflow.com/questions/18665702/… 和developer.mozilla.org/en-US/docs/Web/CSS/background-image 相同
使用以下方法实现您的目标 - document.getElementById('lblbackgroundimage').style.backgroundImage = 'url(' + backgroundimage + ')';

标签： javascript html css

【解决方案1】：

这是您问题的解决方案：

<html>
    <head>
    </head>
    <style>
    </style>
    <body>
        <div>
            <img id = 'img' src=''>
        </div>
    </body>
    <script type="text/javascript">
        var myDate = new Date();
        var hrs = myDate.getHours();

        if (hrs < 12){
            document.getElementById('img').src = '/images/TomasGR/bg-by-time/background-daytime/images/morning.jpg';
        }
        else if (hrs >= 12 && hrs <= 17){
            document.getElementById('img').src = '/images/TomasGR/bg-by-time/background-daytime/images/afternoon.jpg';
        }
        else if (hrs >= 17 && hrs <= 24){
            document.getElementById('img').src = '/images/TomasGR/bg-by-time/background-daytime/images/evening.jpg';
        }
        console.log(hrs);

    </script>
</html>

【讨论】：

【解决方案2】：

var myDate = new Date();
var hrs = myDate.getHours();

var backgroundimage;

if (hrs < 12)
    backgroundimage = ("<img src='/images/TomasGR/bg-by-time/background-daytime/images/morning.jpg'>");
else if (hrs >= 12 && hrs <= 17)
    backgroundimage = ("<img src='/images/TomasGR/bg-by-time/background-daytime/images/afternoon.jpg'");
else if (hrs >= 17 && hrs <= 24)
    backgroundimage = ("<img src='/images/TomasGR/bg-by-time/background-daytime/images/evening.jpg'>");

document.getElementById('lblbackgroundimage').innerHTML =(backgroundimage);

【讨论】：

【解决方案3】：

所以，问题在于您只是将图像作为纯文本粘贴到内部 html 中，但您需要将图像粘贴到 img src 中。要添加图像，您应该首先创建一个 img 标签。由于 div 中没有其他内容，因此您实际上并不需要它，因此您可以将 div 标签更改为 img 标签。结果是：

<html>
    <head>
    </head>
    <style>
    </style>
    <body>
    <img id="lblbackgroundimage"></div>
    </body>
    <script>
        var myDate = new Date();
        var hrs = myDate.getHours();

        var backgroundimage;

        if (hrs < 12)
            backgroundimage = '/images/TomasGR/bg-by-time/background-daytime/images/morning.jpg';
        else if (hrs >= 12 && hrs <= 17)
            backgroundimage = '/images/TomasGR/bg-by-time/background-daytime/images/afternoon.jpg)';
        else if (hrs >= 17 && hrs <= 24)
            backgroundimage = '/images/TomasGR/bg-by-time/background-daytime/images/evening.jpg';

        document.getElementById('lblbackgroundimage').src =
           backgroundimage;
    </script>
    </html>

【讨论】：

【解决方案4】：

谢谢大家！！

解决方法如下：

<html>
<head>
</head>
<style>
</style>
<body>
<label id="lblbackgroundimage"></label>
</body>
<script>
    var myDate = new Date();
    var hrs = myDate.getHours();

    var backgroundimage;

    if (hrs < 12)
        backgroundimage = 'morning.jpg';
    else if (hrs >= 12 && hrs <= 17)
        backgroundimage = 'afternoon.jpg';
    else if (hrs >= 17 && hrs <= 24)
        backgroundimage = 'evening.jpg';

    document.getElementById('lblbackgroundimage').innerHTML = '<div data-src="/images/TomasGR/bg-by-time/background-daytime/images/' + backgroundimage + 'data-sizes="(max-aspect-ratio: 2048/1572) 130vh uk-img="" class="uk-background-norepeat uk-background-cover uk-background-top-center uk-background-fixed uk-section uk-section-large uk-flex" uk-parallax="bgy: -5vh,4vh" uk-height-viewport="offset-top: true;" style="min-height: calc(100vh); background-image: url(&quot;https://tomasgr.org/images/TomasGR/bg-by-time/background-daytime/images/'+backgroundimage+'&quot;); background-repeat: no-repeat; background-size: 1852px 1012.61px; background-position-y: calc(-83.61px);"></div>';    
</script>
</html>

【讨论】：