首页 > 编程札记 > 编程

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

阅读：评论：0

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

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

先看看效果图：

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

有两种方法：

法一：

只需要改变一个css属性：

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

法二：

多个css属性同是改变：

var a = ElementById("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&#ElementById('content').style.backgroundImage='url("one.jpg")';}function b() {var a&#ElementById('content').style.backgroundImage='url("two.jpg")';}function c() {var a&#ElementById('content').style.backgroundImage='url("there.jpg")';}function d() {var a&#ElementById('content').style.backgroundImage='url("four.jpg")';}function e() {var a&#ElementById('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>

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

本文发布于:2024-01-28 09:50:54，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/17064066586566.html

上一篇：插入网页

下一篇：MFC自定义button控件，并手动改变背景图片

标签：背景图片文字网页 html

留言与评论（共有 0 条评论）