Home >Web Front-end >JS Tutorial >Javascript_10_DOM_Exercise
Javascript_10_DOM_Exercise

黄舟Original: 2017-01-18 16:38:301057browse
Javascript_10_DOM_Exercise
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title>DOM_实例练习</title>
    <style type="text/css">
    a:link,a:visited{
        color: blue;
        text-decoration: none;
    }
    a:hover{
        color: red;
    }
    .large{
        font-size: 26px;
    }
    .normal{
        font-size: 16px;
    }
    .small{
        font-size: 12px;
    }
    dl{
        height: 16px;
        overflow: hidden;
    }
    dl dt{
        color: orange;
    }
    dl dd{
        margin: 0px;
    }
    table ul{
        list-style: none;
        margin: 0px;
        padding: 0px;
        background-color: purple;
        color: white;
        display: none;
    }
    table{
        border: #008FF0 dashed 1px;
    }
    table td{
        border: #008FF0 dashed 1px;
        background-color: orange;
    }
    .open_overflow{
        overflow: visible;
    }
    .hidden_overflow{
        overflow: hidden;
    }
    .block_display{
        display: block;
    }
    .none_display{
        display: none;
    }
    </style>
    </head>
    <body>
    <h1>DOM_实例练习</h1>
    <script type="text/javascript" src="a.js">    </script>
    
    ＝＝＝＝＝＝＝＝＝＝＝＝＝＝我是分割线＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
    /*
     * 需求：实现类似QQ好友列表效果
     默认情况下：ul中的display: none;
     当点击a时，打开所在的ul,display: block;其他仍然是display: none;
     */
    <script type="text/javascript">
        function list_ul(aNode){
            //a的下一个兄弟是ul，但不建议使用
            //a的父就是td，首先拿到td,对td用标签名拿ul
            //拿所有的ul，和当前ul比较即可
            var oTd=aNode.parentNode;
            var oUl=oTd.getElementsByTagName("ul")[0];//当前ul
            var collUl=document.getElementsByTagName("ul");
            for (var i=0; i < collUl.length; i++) {
              if (collUl[i]==oUl) {
                  if (oUl.className=="block_display") {
                        oUl.className="none_display";
                    } else{
                        oUl.className="block_display";
                    }
              } else{
                  collUl[i].className="none_display";              
              }
            }
        }
    </script>
    <table>
        <tbody>
            <tr>
                <td>
                    <a href="javascript:void(0)" onclick="list_ul(this)">红楼梦</a>
                    <ul>
                        <li>林黛玉</li>
                        <li>史湘云</li>
                        <li>薛宝钗</li>
                        <li>妙玉</li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td>
                    <a href="javascript:void(0)" onclick="list_ul(this)">西游记</a>
                    <ul>
                        <li>唐僧</li>
                        <li>孙悟空</li>
                        <li>猪八戒</li>
                        <li>沙和尚</li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td>
                    <a href="javascript:void(0)" onclick="list_ul(this)">水浒传</a>
                    <ul>
                        <li>鲁智深</li>
                        <li>林冲</li>
                        <li>武松</li>
                        <li>李逵</li>
                    </ul>
                </td>
            </tr>
        </tbody>
    </table>
    ＝＝＝＝＝＝＝＝＝＝＝＝＝＝我是分割线＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
    /*
     * 需求：展开列表效果！
         默认情况下：dl的overflow属性值是：hidden;
         当点击dt的时候
         dl的overflow属性值是：visible;
     */
    <script type="text/javascript">
            var flag=true;//设置为全局变量
        function showDl_3(dtNode){
            //有多个dl,每次只打开点击的DL
            //DL是dt的父结点
            //这个是改进版本2，先预定义样式，打开和关闭
            var oDl=dtNode.parentNode;//获取当前dl
            //接着获取所有dl,进行遍历，除了当前dl，其他全隐藏
            var collDl=document.getElementsByTagName("dl");
            for (var i=0; i < collDl.length; i++) {
                if (collDl[i]==oDl) {
                    if (oDl.className=="open_overflow") {
                        oDl.className="hidden_overflow";
                    } else{
                        oDl.className="open_overflow";
                    }
                }else{
                    collDl[i].className="hidden_overflow";
                }
            }
            
        }
        function showDl_2(){
            //这个是改进版本，先预定义样式，打开和关闭
            var oDl=document.getElementById("dl_id_1");
            if (oDl.className=="open_overflow") {
                oDl.className="hidden_overflow";
            } else{
                oDl.className="open_overflow";
            }
        }
        function showDl_1(){
            var oDl=document.getElementById("dl_id_1");
            if(flag){
                oDl.style.overflow="visible";
                flag=false;
            }else{
                oDl.style.overflow="hidden";
                flag=true;
            }
        }
    </script>
    <dl id="dl_id_1">
        <dt onclick="showDl_3(this)">dt定义条目1</dt>
        <dd>dd定义描述1—1</dd>
        <dd>dd定义描述1—2</dd>
        <dd>dd定义描述1—3</dd>
        <dd>dd定义描述1—4</dd>
    </dl>
    <dl >
        <dt onclick="showDl_3(this)">dt定义条目2</dt>
        <dd>dd定义描述2—1</dd>
        <dd>dd定义描述2—2</dd>
        <dd>dd定义描述2—3</dd>
        <dd>dd定义描述2—4</dd>
    </dl>
    <dl >
        <dt onclick="showDl_3(this)">dt定义条目3</dt>
        <dd>dd定义描述3—1</dd>
        <dd>dd定义描述3—2</dd>
        <dd>dd定义描述3—3</dd>
        <dd>dd定义描述3—4</dd>
    </dl>
    ＝＝＝＝＝＝＝＝＝＝＝＝＝＝我是分割线＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
    <script type="text/javascript">
        function changeFont(styleName){
            var oDiv=document.getElementById("div_id_1");
            oDiv.className=styleName;//这句是关键，重点！                                                              
        }
    </script>
    /*
     * 需求：仿造小说网站，大中小字体
     */
    <a href="javascript:void(0)" onclick="changeFont(&#39;large&#39;)">大字体</a>
    <a href="javascript:void(0)" onclick="changeFont(&#39;normal&#39;)">中字体</a>
    <a href="javascript:void(0)" onclick="changeFont(&#39;small&#39;)">小字体</a>
    <div id="div_id_1">
        小说正文小说正文小说正文小说正文小说正文小说正文小说正文小说正文
        小说正文小说正文小说正文小说正文小说正文小说正文小说正文小说正文
        小说正文小说正文小说正文小说正文小说正文小说正文小说正文小说正文
    </div>
    </body>
</html>
The above is the content of Javascript_10_DOM_exercise. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Javascript_9_DOM_node exerciseNext article：Javascript_9_DOM_node exercise
See more
Javascript_10_DOM_Exercise

Related articles
