使用2个按钮,通过事件触发多个盒子的内容及样式变动

Original 2019-04-18 15:38:50 421
abstract: <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标签的href关联;

</script>



//----javascript----

//同时修改盒子属性、内容

function InsContent($param){

$param.style.borderRadius = "150px";          //定义函数改成盒子属性,点击盒子转变成圆角

$param.style.background='#FF99CC';           //调整盒子背景颜色

$param.style.width="150px";                         //调整盒子宽度

$param.style.height="150px";                         //调整盒子高度

$param.style.textAlign='center';                     //调整盒子内容居中

$param.style.lineHeight='150px';                    // 调整盒子内容行高

$param.style.color='blue';                                //调整盒子文本颜色


$iparam = document.getElementById('box1'); //根据ID获取到指定的标签 ,进而修改标签内容

$iparam.innerHTML = "我加进来了!";

}


//图片切换,切记图片标签是属于内容,不属于样式,如果是背景图片才需要使用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'); //根据getElementByClassName获取的是一个《数组》, 需要遍历执行变动,这点授课老师没讲到;

var i;

for (i = 0; i < x.length; i++) {

    x[i].style.backgroundColor = "red";

    x[i].innerHTML = "我变红啦!";

}

}


function ChangeWhite(){

var x = document.getElementsByClassName('box2'); //根据getElementByClassName获取的是一个《数组》, 需要遍历执行

var i;

for (i = 0; i < x.length; i++) {

    x[i].style.backgroundColor = "white";

    x[i].innerHTML = "我又变白色啦"

}

}


Correcting teacher:查无此人Correction time:2019-04-19 09:14:57
Teacher's summary:完成的不错,每行js代码都要增加;号。你好像习惯最后一行不加。继续加油。

Release Notes

Popular Entries