サマリー: <div id='box1' onclick='InsContent(this)'></div> <img src="images/phonefront.png" alt="手面正面" id="phonehover" onmouseover="imgchange
<div id='box1' onclick='InsContent(this)'></div>
<img src="images/phonefront.png" alt="手面正面" id="phonehover" onmouseover="imgchange(this)">
<div class='box2'></div>
<div class='box2'></div>
<div class='box2'></div>
<div class='box2'></div>
<div class='box2'></div>
<input type="button" onclick="ChangeRed()" value="BOX2變紅">
<input type="button" onclick="ChangeWhite()" value="BOX2變白">
<script type="text/javascript" src="js/demo1.js"> //通過src連接外部js文件,跟css不同,css是通過link標(biāo)簽的href關(guān)聯(lián);
</script>
//----javascript----
//同時修改盒子屬性、內(nèi)容
function InsContent($param){
$param.style.borderRadius = "150px"; //定義函數(shù)改成盒子屬性,點擊盒子轉(zhuǎn)變成圓角
$param.style.background='#FF99CC'; //調(diào)整盒子背景顏色
$param.style.width="150px"; //調(diào)整盒子寬度
$param.style.height="150px"; //調(diào)整盒子高度
$param.style.textAlign='center'; //調(diào)整盒子內(nèi)容居中
$param.style.lineHeight='150px'; // 調(diào)整盒子內(nèi)容行高
$param.style.color='blue'; //調(diào)整盒子文本顏色
$iparam = document.getElementById('box1'); //根據(jù)ID獲取到指定的標(biāo)簽 ,進(jìn)而修改標(biāo)簽內(nèi)容
$iparam.innerHTML = "我加進(jìn)來了!";
}
//圖片切換,切記圖片標(biāo)簽是屬于內(nèi)容,不屬于樣式,如果是背景圖片才需要使用x.style.backgroundImages;document.getElementById("idname")."屬性"="屬性值"
function imgchange(x){
x=document.getElementById('phonehover');
x.src="images/phoneback.png"
}
function ChangeRed(){
var x = document.getElementsByClassName('box2'); //根據(jù)getElementByClassName獲取的是一個《數(shù)組》, 需要遍歷執(zhí)行變動,這點授課老師沒講到;
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
x[i].innerHTML = "我變紅啦!";
}
}
function ChangeWhite(){
var x = document.getElementsByClassName('box2'); //根據(jù)getElementByClassName獲取的是一個《數(shù)組》, 需要遍歷執(zhí)行
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "white";
x[i].innerHTML = "我又變白色啦"
}
}
添削の先生:查無此人添削時間:2019-04-19 09:14:57
先生のまとめ:完成的不錯,每行js代碼都要增加;號。你好像習(xí)慣最后一行不加。繼續(xù)加油。