行为=事件+由该事件触发的动作
常用事件：onXxx
onLoad 打开网页事件
onUnLoad 关闭事件
onClick 单击事件
onChange 改变事件
onMouseOver 鼠标悬浮事件
onMouseOut 鼠标移开事件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>改变颜色</title>
<style>
#div1{width:200px; height:200px; background:red;}
.box{background:#F39;}
</style>
<script><!--JavaScript-->
function toColor(color){//带参数方法
var oDiv=document.getElementById(‘div1‘);
oDiv.style.background=color;
}
function toValue(name,value){//可选择改变哪一个属性
var oDiv=document.getElementById(‘div1‘);
oDiv.style[name]=value;//特别注意[]的使用，[]可以写属性值，也可以写参数名称
}
function toGreen(){//无参数方法，只能实现一种功能
var oDiv=document.getElementById(‘div1‘);
oDiv.style.background=‘green‘;
}
function setText(){
var oTxt=document.getElementByIsd(‘txt1‘);
oTxt.value=‘显示在文本框中‘;//当调用此方法时，在文本框中显示。
oTxt.title=‘显示成提示信息‘;//当鼠标移到文本框中，在鼠标上显示信息
}
function setClass(){
var oDiv=document.getElementById(‘div1‘);
oDiv.className="box";
}
</script>
</head>
<body>
<input type="button" value="变绿" onclick="toColor(‘green‘)"/><!--单击事件调用函数-->
<input type="button" value="变黄" onclick="toColor(‘yellow‘)"/>
<input type="button" value="变蓝" onclick="toColor(‘blue‘)"/>
<input type="button" value="变高" onclick="toValue(‘height‘,‘400px‘)"/>
<input type="button" value="变矮" onclick="toValue(‘height‘,‘150px‘)"/>
<input type="button" value="变宽" onclick="toValue(‘width‘,‘400px‘)"/>
<input type="button" value="变窄" onclick="toValue(‘width‘,‘150px‘)"/>
<input type="button" value="变颜色" onclick="toGreen()"/>
<div id="div1" >div1区域</div>
<input type="text" id="txt1" />
<input type="button" value="显示文字" onclick="setText()"/>
</body>
</html>
选择框
css html javascript 完全分离
window.onLoad 页面加载完成后发生
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选择框</title>
<script>
window.onload=function (){
var oBtn1=document.getElementById(‘btn1‘);
var oBtn2=document.getElementById(‘btn2‘);
var oBtn3=document.getElementById(‘btn3‘);
var oDiv=document.getElementById(‘div1‘);
var aCh=oDiv.getElementsByTagName(‘input‘);
oBtn1.onclick=function (){
for(var i=0;i<aCh.length;i++){
aCh[i].checked=true;
}
};
oBtn2.onclick=function (){
for(var i=0;i<aCh.length;i++){
aCh[i].checked=false;
}
};
oBtn3.onclick=function (){
for(var i=0;i<aCh.length;i++){
if(aCh[i].checked==true){
aCh[i].checked=false;
}else{
aCh[i].checked=true;
}
}
};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="全选"/>
<input id="btn2" type="button" value="不选"/>
<input id="btn3" type="button" value="反选"/>
<div id="div1">
<input type="checkbox"/><br>
<input type="checkbox"/><br>
<input type="checkbox"/><br>
<input type="checkbox"/><br>
<input type="checkbox"/><br>
<input type="checkbox"/><br>
<input type="checkbox"/><br>
<input type="checkbox"/><br>
<input type="checkbox"/><br>
<input type="checkbox"/><br>
<input type="checkbox"/><br>
<input type="checkbox"/><br>
</div>
</body>
</html>
时间： 2024-11-06 22:55:16