先引入一个JavaScript文件
function my$(id) {
return document.getElementById(id);
}
<!--1.点击按钮选择菜单-->
<input type="button" value="选择" id="select">
<select>
<option>1</option>
<option id="one">2</option>
<option>3</option>
<option id="two">4</option>
<option>5</option>
</select>
<script>
my$("select").onclick=function () {
my$("one").selected=true;
}
</script>
<!--2.点击按钮,修改div的宽,高,背景颜色-->
<input type="button" value="按钮" id="btn">
<div id="div"></div>
<script>
my$("btn").onclick=function () {
my$("div").style.width="200px";
my$("div").style.height="200px";
my$("div").style.backgroundColor="red";
};
</script>
<!--3.点击按钮,设置div隐藏-->
<input type="button" value="隐藏" id="btn">
<input type="button" value="显示" id="btn1">
<div id="div" style="width: 200px;height: 200px;background-color:red;"></div>
<script>
my$("btn").onclick=function () {
my$("div").style.display="none";
};
my$("btn1").onclick=function () {
my$("div").style.display="block";
};
</script>
<!--4.点击按钮,设置显示和隐藏-->
<input type="button" value="隐藏" id="btn">
<div id="div" style="width: 200px;height: 200px;background-color:red;"></div>
<script>
my$("btn").onclick=function () {
if(this.value=="隐藏"){
my$("div").style.display="none";
this.value="显示";
}else if(this.value=="显示"){
my$("div").style.display="block";
this.value="隐藏";
}
}
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cls{
background-color:black;
}
</style>
<script src="common.js"></script>
</head>
<body>
<input type="button" value="开/关灯" id="my">
<script>
my$("my").onclick=function () {
document.body.className=document.body.className!="cls"?"cls":"";
};
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="common.js"></script>
<style>
.cls{
width: 200px;
height: 200px;
background-color: red;
}
.box{
display: none;
}
</style>
</head>
<body>
<input type="button" value="显示" id="btn">
<div id="div" class="cls"></div>
<!--1.用类样式设置div的属性-->
<!--<script>-->
<!-- my$("btn").onclick=function () {-->
<!--
<!-- my$("div").className="cls";-->
<!-- my$("div").style.border="10px solid blue";-->
<!-- }-->
<!--</script>-->
<!--2.用按钮控制盒子的显示-->
<script>
my$("btn").onclick=function () {
if(my$("div").className!="box"){
my$("div").className="box";
this.value="显示";
}else{
my$("div").className="";
this.value="隐藏";
}
};
</script>
</body>
</html>