首頁猿問關于用Javascript寫獲取當...

關于用Javascript寫獲取當前div高度，鼠標滾動一下顯示對應高度怎么寫？

JavaScript

hengyiyuan 2016-03-18 16:45:06

關于用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>

查看完整描述

1 回答

SuperManSuperWorld

TA貢獻6條經驗獲得超0個贊

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

反對回復 2016-05-03