用自定义getElementByClassName函数做“查看更多”的特效 
<!DOCTYPE html>
<html>
<head>
    <title>查看更多</title>
    <meta charset="utf-8">
    <style type="text/css">
        button {
            display:block;
        }

        a {
            margin-top:60px;
            text-decoration:none;
            color:#2D5A87;
            display:block;
        }
        
          div {
              margin:auto;
              width:200px;
          }

          p {
              font-size:13px;
          }

        .none {
            display:none;
        }    
    </style>
</head>
<body>
    <div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p class="none">6</p>
    <p class="none">7</p>
    <button id="watchmore">查看更多</button>
    <a href="../js project.html">返回主界面</a>
    </div>


    <script type="text/javascript">
        
        function getElementsByClassName (className) {
                   var all = document.getElementsByTagName('*');
                   var elements = new Array();
                   for (var e = 0; e < all.length; e++) {
                     if (all[e].className == className) {
                        elements[elements.length] = all[e];
                           break;
                      }
                }
                   return elements;
            }

        window.onload = function(){
            var watch = document.getElementById('watchmore');
            var op =document.getElementsByClassName('none');
            watch.onclick = function(){
                if(watch.innerHTML == "查看更多"){
                    for(var i=0; i<op.length; i++){
                        op[i].style.display = "block";
                        watch.innerHTML = "隐藏";
                    }
                }
                else {
                    for(var i=0; i<op.length; i++){
                        op[i].style.display = "none";
                        watch.innerHTML = "查看更多";
                    }
                }
            }
        }

    </script>
</body>
</html>

 

 posted on 2016-12-05 10:45  Yhspehy  阅读(654)  评论(0)    收藏  举报