지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

Javascript_10_DOM_운동

黄舟
풀어 주다： 2017-01-18 16:38:30
원래의
1012명이 탐색했습니다.

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>
로그인 후 복사

위 내용은 Javascript_10_DOM_exercise 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요. )!



관련 라벨：
Javascript，DOM，练习
원천：php.cn
이전 기사：Javascript_9_DOM_node 연습 다음 기사：Javascript_11_DOM_Table 연습
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
전체 파일 루트가 없으면 이미지가 작동하지 않습니다. 도움이 되었기를 바랍니다. 이전에 웹 사이트에 대한 많은 페이지를 작성했지만(단지 내 연습을 위해 시뮬레이션) 어떤 이유로 새(오래되었지만 Windows10을 실...
에서 2024-04-03 23:27:05
0
1
396
HTML에서 <br> 태그를 사용할 때 출력 형식에 문제가 있습니다. 연습문제 때문에 고민이에요. 보시다시피 HTML부터 CSS까지 모든 것이 있지만 출력은 이제 올바른 방식으로 표시됩니다. <br> 태그를 사용하면 출력...
에서 2024-04-02 15:56:11
0
1
315
BeautifulSoup을 사용하여 특정 Google 날씨 텍스트를 긁는 방법은 무엇입니까? BeautifulSoup을 사용하여 Python에서 코스 텍스트 "New York City, USA"를 찾는 방법은 무엇입니까? 연습을 위해 비...
에서 2024-04-01 14:06:14
0
1
308
데이터를 처리하기 위해 스타일이 지정된 구성요소의 지도 기능을 어떻게 사용하시겠습니까? 지도 기능 사용법을 연습하고 있어요. json 파일을 생성했고, 지도 기능을 이용하여 각 데이터를 표시하고 싶습니다. 데이터가 아주 잘 전송됩니다. 하지만 문제는...
에서 2024-03-30 18:06:00
0
1
378
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿