html点击文字改变网页背景图片

最新推荐文章于 2022-09-17 15:19:22 发布

Mr_jianghanlin

最新推荐文章于 2022-09-17 15:19:22 发布

阅读量3k

点赞数 5

分类专栏：前端文章标签： css css3 html html5

本文链接：https://blog.csdn.net/mr_jianghanlin/article/details/105663451

版权

前端专栏收录该内容

23 篇文章 2 订阅

订阅专栏

HTML点击文字改变网页背景图片

先看看效果图：

在这里插入图片描述

想要实现上述的效果很简单的，用上JavaScript通过标签元素id，用document.getElementById().style设置标签元素的css属性

有两种方法：

法一：

只需要改变一个css属性：

document.getElementById("idname").style.属性名="样式";

法二：

多个css属性同是改变：

var a = document.getElementById("idname");

with(a.style){
width = 100px;
font-size = 12px;
.......
}

下面看看具体的HTML和css代码实现：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天气</title>
</head>
<style>
    .content{
        width: 100%;
        height: 600px;
        background-image: url("one.jpg");
        background-repeat: no-repeat;
        background-size: 100%;
        display: flex;
        align-items: flex-end;
        color: white;
        justify-content: space-around;
    }
    .one,.two,.four,.there,.five{
        border:2px solid white;
        margin-bottom: 5px;
        width: 15%;
        text-align: center;
        font-size: 18px;
        height: 90px;
    }
    .one1,.two1,.four1,.there1,.five1{
        border:3px solid white;
        margin: 0px auto;
        margin-top: -30px;
        width: 60px;
        height: 60px;border-radius: 30px;
    }

    .one{
        background-color: #9E9081;
    }
    .two{
        background-color: #163F5B;
    }
    .there{
        background-color: #519881;
    }
    .four{
        background-color: #99BB45;
    }
    .five{
        background-color:#FFBC04;
    }
    .one1{
        background-image: url("one.jpg");
    }
    .two1{
        background-image: url("two.jpg");

    }
    .there1{
        background-image: url("there.jpg");

      }
    .four1{
        background-image: url("four.jpg");

        }
    .five1{
        background-image: url("five.jpg");

          }

    .down{
        margin-top:25px ;
    }
</style>
<script>
    function a() {
        var a=document.getElementById('content').style.backgroundImage='url("one.jpg")';

    }
    function b() {
        var a=document.getElementById('content').style.backgroundImage='url("two.jpg")';

    }
    function c() {
        var a=document.getElementById('content').style.backgroundImage='url("there.jpg")';

    }
    function d() {
        var a=document.getElementById('content').style.backgroundImage='url("four.jpg")';

    }
    function e() {
        var a=document.getElementById('content').style.backgroundImage='url("five.jpg")';

    }

</script>
<body>
<div class="content" id="content">
    <div class="one" onclick="a()">
        <div class="one1"></div>
        <div class="down" >周一狂躁综合症</div>
    </div>
    <div class="two"  onclick="b()">
        <div class="two1"></div>
        <div class="down">周二狂雷霆似雨浇</div>
    </div>
    <div class="there" onclick="c()">
        <div class="there1"></div>
        <div class="down">周三阴郁似乌云</div>
    </div>
    <div class="four" onclick="d()">
        <div class="four1"></div>
        <div class="down">周四冬日盼春来</div>
    </div>
    <div class="five" onclick="e()">
        <div class="five1"></div>
        <div class="down">周五守得艳阳天</div>
    </div>

</div>



</body>
</html>

里面涉及了几张图片，自己可以随便找自己喜欢的照片。

Mr_jianghanlin

关注

5
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
html点击文字改变网页背景图片

HTML点击文字改变网页背景图片先看看效果图：想要实现上述的效果很简单的，用上JavaScript通过标签元素id，用document.getElementById().style设置标签元素的css属性有两种方法：法一：只需要改变一个css属性：document.getElementById("idname").style.属性名="样式";法二：多个css属性同是改变：v...
复制链接

扫一扫