练习网址:http://www.fgm.cc/learn/lesson2/01.html
学到了条件运算符的运用;getElementsByTagName的Element是有s的,所以只取一个元素需要加[0],getElementById的Element是没有s的。
代码如下:
HTML
<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>百度输入法</title>
<link rel="stylesheet" type="text/css" href="1_inputMethod.css">
</head>
<body>
<div id="container">
<button>输入法</button>
<ul>
<li>手写</li>
<li>拼音</li>
<li id="close">关闭</li>
</ul>
</div>
<script src="1_inputMethod.js"></script>
</body>
</html>```
CSS
#container {
width: 100px;
height: 150px;
margin: 0 auto;
}
li {
list-style-type: none;
width: 80px;
font-size: 12px;
color: blue;
text-align: left;
text-indent: 5px;
padding: 4px 0;
cursor: pointer;
}
ul {
width: 80px;
margin: 5px 0;
padding: 0;
border: 1px solid #0099CC;
display: none;
}
#close {
border-top: 1px solid #0099CC;
}
li:hover {
background-color: #99CCFF;
}
JavaScript
window.onload = function() {
var btn = document.getElementsByTagName("button")[0];
var show = document.getElementsByTagName("ul")[0];
var close = document.getElementById("close");
btn.onclick = function() {
show.style.display = (show.style.display == "none")?"block":"none";
};
close.onclick = function() {
show.style.display = "none";
};
}