猿问

关于用Javascript写获取当前div高度,鼠标滚动一下显示对应高度怎么写?

关于用Javascript写获取当前div高度,鼠标滚动一下显示对应高度怎么写?例如下面这个事例,我用鼠标滚动一下,显示page1的高度,再滚动一下,显示page2的高度。这样怎么写?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
        .main{width: 100%; height: auto;}
        #page1{width: 100%; height: 600px; background: red;}
        #page2{width: 100%; height: 500px; background: yellow;}
        #page3{width: 100%; height: 700px; background: green;}
        #page4{width: 100%; height: 400px; background: blue;}
        </style>
        <script type="text/javascript">
            window.onload=function()
            {
                var page1=document.getElementById("page1");
                    page1.style.height='600px';
            }
        </script>
    </head>
    <body>
        <div class="main">
            <div id="page1">1</div>
            <div id="page2">2</div>
            <div id="page3">3</div>
            <div id="page4">4</div>
        </div>
    </body>
</html>

hengyiyuan
浏览 2474回答 1
1回答

SuperManSuperWorld

    <div id="wrap">         <div id="item1">1</div>         <div id="item2">2</div>         <div id="item3">3</div>         <div id="item4">4</div>     </div>     <script>         function getScrollTop(){             var scrollTop=0;             if(document.documentElement && document.documentElement.scrollTop){                 scrollTop=document.documentElement.scrollTop;             }else if(document.body){                 scrollTop=document.body.scrollTop;             }             return scrollTop;         }         //var scrollTop=getScrollTop();         window.onscroll=function(){             var scrollTop=getScrollTop();             var item1=document.getElementById('item1');             var item2=document.getElementById('item2');             var item3=document.getElementById('item3');             var item4=document.getElementById('item4');             if(scrollTop<460){                 console.log('1Width: '+item1.offsetWidth+' 1Height: '+item1.offsetHeight);             }else if(scrollTop>460 && scrollTop<848){                 console.log('2Width: '+item2.offsetWidth+' 2Height: '+item2.offsetHeight);             }else if(scrollTop>848 && scrollTop<1400){                 console.log('3Width: '+item3.offsetWidth+' 3Height: '+item3.offsetHeight);             }else if(scrollTop>1400){                 console.log('4Width: '+item4.offsetWidth+' 4Height: '+item4.offsetHeight);             }         }         //console.log(scrollTop);     </script>
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答