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，则返回表达式。可以使用逗号表达式链接多个表达式。

要查看英语原文，请勾选“英语”复选框。也可将鼠标指针移到文本上，在弹出窗口中显示英语原文。
翻译
英语

条件（三元）运算符 (?:) (JavaScript)

 

视情况返回以下两个表达式之一。

语法
 
 
 
test ? expression1 : expression2
参数
 
test

任何 Boolean 表达式。

expression1

如果 test 为 true，则返回表达式。可能是逗号表达式。

expression2

如果 test 为 false，则返回表达式。可以使用逗号表达式链接多个表达式。

posted @ 2017-08-04 21:39  Z-Imp  阅读(163)  评论(0)  编辑  收藏  举报