一：鼠标提示框
需求描述：鼠标移入都input上，div显示，移出，div消失
分析：控制display=block/none
鼠标移入，鼠标移出事件
<input type="button" onmouseover="alert(‘鼠标移入‘)" onmouseout="alert(‘鼠标移出‘)">
功能代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#div1 {
width: 200px;
height: 100px;
background-color: gray;
display: none;
}
</style>
</head>
<body>
<input type="button" onmouseover="div1.style.display=‘block‘" onmouseout="div1.style.display=‘none‘">
<div id="div1">为了你的信息安全，请不要再网吧内勾选</div>
</body>
</html>
问题：版本兼容性差，存在div1 is not define的问题，火狐浏览器会出现问题
解决办法：使用 document.getElementById()
功能代码
html代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #div1 { width: 200px; height: 100px; background-color: gray; display: none; } </style> </head> <body> <input type="button" onmouseover="look();" onmouseout="unlook();"> <div id="div1">为了你的信息安全，请不要再网吧内勾选</div> <script src="13DOM操作.js"></script> # 这里必须在div的下面引用，因为上面引用会先执行js，找不到div1,变量d为none，根本无法修改属性。 </body> </html>
javascript代码
var d = document.getElementById("div1");
function look() {
d.style.display =‘block‘;
}
function unlook() {
d.style.display =‘none‘;
}
二：鼠标移入后，div变大，变色
html代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #div1 { width: 100px; height: 100px; background-color: red; } </style> </head> <body> <div id="div1" onmouseover="big();" onmouseout="small();"></div> <script src="13DOM操作.js"></script> </body> </html>
javasript代码
var d = document.getElementById("div1"); function big() { d.style.width =‘500px‘; d.style.height=‘500px‘; d.style.backgroundColor=‘green‘; } function small() { d.style.width =‘100px‘; d.style.height=‘100px‘; d.style.backgroundColor=‘red‘; }
三：网页换肤
实现方式一：
html代码
<body id="body">
<input type="submit" id="input1" value="皮肤一" onclick="to_green();"> <input type="submit" id="input2" value="皮肤二" onclick="to_pink();"> <script src="13DOM操作.js"></script>
javadcript代码
var b = document.getElementById("body");
function to_green() {
b.style.backgroundColor="green";
}
function to_pink() {
b.style.backgroundColor="pink";
}
实现方式二：
css代码
# css1.css body { background-color: gray; } #css2.css body { background-color:yellowgreen; } #css3.css body { background-color: pink; }
html代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="css1.css" id="objlink"> # 知识点：任何标签都可以加id和class选择器，用来控制属性 <script src="13DOM操作.js"></script> </head> <body> <input type="submit" value="皮肤一" onclick="to_green();"> <input type="submit" value="皮肤二" onclick="to_pink();"> </body> </html>
javascript代码
var obj = document.getElementById("objlink"); function to_green() { obj.href = "css2.css"; # 知识点二：任何标签的任何属性都可以修改 } function to_pink() { obj.href = "css3.css"; }
四：点击出现下拉菜单，再次点击，隐藏下拉菜单
html代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="css1.css" id="objlink"> <style> #div1{ width: 100px; height: 500px; display: none; background-color:pink; } </style> </head> <body> <input type="submit" value="选项" onclick="down();"> <div id=div1></div> <script src="13DOM操作.js"></script> </body> </html>
javascript代码
var d = document.getElementById("div1"); function down(){ if (d.style.display =="none"){ # 和python中的==用法一样，判等 d.style.display = "block"; } else{ d.style.display = "none"; } }
原文：https://www.cnblogs.com/meloncodezhang/p/12032615.html