JavaScript實現(xiàn)點擊圖片換背景
更新時間：2020年11月20日 17:23:13 作者：我是Dreamer啊
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)點擊圖片換背景，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
JS制作網(wǎng)頁–點擊圖片換背景，供大家參考，具體內(nèi)容如下
網(wǎng)頁中有四個圖片，點擊不同的圖片，更換相對應的背景。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
img{
border: 0px;
vertical-align: middle;
width: 192px;
}
div{
width: 768px;
height: 120px;
}
div ul {
overflow: hidden;
background-color: pink ;
margin: 100px auto;
}
div ul li {
float: left;
width: 192px;
height: 120px;
cursor: pointer;
}
body{
background: url(images/1.jpg) no-repeat center top;
}
</style>
</head>
<body>
<div>
<ul>
<li><img src=images/1.jpg> </li>
<li><img src=images/2.jpg></li>
<li><img src=images/3.jpg></li>
<li><img src=images/4.jpg></li>
</ul>
</div>
<script>
var img = document.querySelector('ul').querySelectorAll('img')
for(var i = 0 ;i < img.length;i++){
img[i].onclick = function(){
document.body.style.backgroundImage='url('+this.src+')';
}
}
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
JavaScript面向?qū)ο笾R串結(jié)(讀JavaScript高級程序設計(第三版))
最近在看JavaScript高級程序設計(第三版)，面向?qū)ο笠徽?0多頁，來來回回看了三五遍，每次看的收獲都不一樣2012-07-07
嘗試了好多種css屬性，總是無法達成目標。主要就是height這個屬性，100%，對于ff似乎并不起什么作用，既然我將其父容器的高度也設置為100%，依然沒有效果。這樣的話，就無法顯示出平鋪的背景，想法也得不到實現(xiàn)。2008-11-11
在js代碼拼接dom對象到頁面上去的模板總結(jié)(必看)
下面小編就為大家?guī)硪黄趈s代碼拼接dom對象到頁面上去的模板總結(jié)(必看)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要介紹了BootStrap實現(xiàn)帶關閉按鈕功能,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02
實現(xiàn)div滾動條默認最底部以及默認最右邊的示例代碼
下面小編就為大家分享一篇實現(xiàn)div滾動條默認最底部以及默認最右邊的示例代碼，代碼非常簡潔，具有很好的參考價值，希望對大家有所幫助2017-11-11
JavaScript格式化日期時間的方法和自定義格式化函數(shù)示例
JavaScript默認的時間格式我們一般情況下不會用，所以需要進行格式化，下面說說我總結(jié)的JavaScript時間格式化方法2014-04-04
這篇文章主要介紹了如何在TypeScript中處理日期字符串，主要通過輸入日期字符串來改善開發(fā)者的體驗并減少潛在的錯誤，下文實現(xiàn)操作的分享需要的小伙伴可以參考一下2022-04-04
有時候需要刪除網(wǎng)站的cookies，一個一個太麻煩，這個可以批量的刪除所有的cookies，需要的朋友可以參考下。2010-11-11
JavaScript DOMContentLoaded事件案例詳解
這篇文章主要介紹了JavaScript DOMContentLoaded事件案例詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了javascript操作ul中l(wèi)i的方法,可實現(xiàn)鼠標經(jīng)過li標簽項對應改變背景色的功能,涉及javascript鼠標事件及頁面元素屬性的相關操作技巧,需要的朋友可以參考下2015-05-05