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

本文主要是介绍html点击文字改变网页背景图片，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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>