亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

使用2個按鈕,通過事件觸發(fā)多個盒子的內(nèi)容及樣式變動

オリジナル 2019-04-18 15:38:50 426
サマリー: <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ù)加油。

手記を発表する

人気のある見出し語