2-1 百度输入法切换(三元运算符)
百度输入法切换,代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>输入法</title> <style> body, ul, li, button { margin: 0; padding: 0; } body { font: 12px/1.5 Tahoma; } ul { list-style-type: none; } button { cursor: pointer; } #outer { width: 70px; margin: 10px auto; } #ime { margin-top: 5px; border: 1px solid #9a99ff; display: none; } #ime li { width: 100%; /*定义基于包含块(父元素)宽度的百分比宽度*/ line-height: 24px; display: inline-block; vertical-align: top; } #close { border-top: 1px solid #9a99ff; } #ime li a { color: #00c; padding: 0 5px; display: block; text-decoration: none; } #ime li a:hover { background: #d9e1f6; } </style> <script> window.onload = function () { var btn = document.getElementsByTagName("button")[0]; var ime = document.getElementById("ime"); var close = document.getElementById("close"); var style = ime.style; btn.onclick = function () { style.display = style.display == "block" ? "none" : "block" } //三元运算符 close.onclick = function () { style.display = "none" } } </script> </head> <body> <div id="outer"> <button value="输入法">输入法</button> <ul id="ime"> <li><a href="#">手写</a></li> <li><a href="#">拼音</a></li> <li id="close"><a href="#">关闭</a></li> </ul> </div> </body> </html>
三元运算符
语法
test ? expression1 : expression2
参数
test
任何 Boolean 表达式。
expression1
如果 test 为 true,则返回表达式。可能是逗号表达式。
expression2
如果 test 为 false,则返回表达式。可以使用逗号表达式链接多个表达式。
要查看英语原文,请勾选“英语”复选框。也可将鼠标指针移到文本上,在弹出窗口中显示英语原文。
|
翻译
英语
|