2-1 百度输入法切换（三元运算符）

最新推荐文章于 2024-09-16 08:47:17 发布

weixin_30687051

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量81

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Z-Imp/p/7287249.html

版权

百度输入法切换，代码如下：

<!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>