鼠标、函数、隐藏显示、换肤、提示框
鼠标操作
onmouseover鼠标移入显示
onmouseout鼠标移出显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#div1 {
width: 200px;
height: 100px;
background: #ccc;
border: 1px solid #999;
display: none;
}
</style>
</head>
<body>
<input type="checkbox" onmouseover="div1.style.display = 'block'" onmouseout="div1.style.display = 'none'" />
<div id="div1">
为了你的信息安全……
</div>
</body>
</html>
当鼠标移到checkbox上时,会出现“为了你的信息安全……”的字样,移出时,div隐藏
函数
为方便编写JavaScript语句,可以选择使用函数
var用于定义
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#div1 {
width: 100px;
height: 100px;
background: red;
}
</style>
<script type="text/javascript">
function toGreen(){
var odiv = document.getElementById('div1');
odiv.style.width = '200px';
odiv.style.height = '200px';
odiv.style.background = 'green';
}
function toRed(){
var odiv = document.getElementById('div1');
odiv.style.width = '100px';
odiv.style.height = '100px';
odiv.style.background = 'red';
}
</script>
</head>
<body>
<div id="div1" onmouseover="toGreen()" onmouseout="toRed()"></div>
</body>
</html>
当鼠标移入时样式会发生变化
当鼠标移出时恢复原状
隐藏显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#div1 {
width: 100px;
height: 200px;
background: #ccc;
display: none;
}
</style>
<script type="text/javascript">
function showHide(){
var oDiv = document.getElementById('div1');
if (oDiv.style.display == 'block') {
oDiv.style.display = 'none';
}else {
oDiv.style.display = 'block';
}
}
</script>
</head>
<body>
<input type="button" value="显示隐藏" onclick="showHide()" />
<div id="div1"></div>
</body>
</html>
当点击按钮时会显示被隐藏的内容,再次点击时隐藏
换肤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link id="l1" rel="stylesheet" type="text/css" href="01.css">
<script type="text/javascript">
function skin1(){
var oL = document.getElementById('l1');
oL.href = '01.css';
}
function skin2(){
var oL = document.getElementById('l1');
oL.href = '02.css';
}
</script>
</head>
<body>
<input type="button" value="皮肤1" onclick="skin1()" />
<input type="button" value="皮肤2" onclick="skin2()" />
</body>
</html>
事先准备两个及以上的css,利用js实现换肤功能
提示框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function setText(){
var oTxt = document.getElementById('txt1');
oTxt.value = 'asdfghjk';
oTxt.title = 'asdfghjk';//提示
}
</script>
</head>
<body>
<input id="txt1" type="text" />
<input type="button" value="改文字" onclick="setText()" />
</body>
</html>