为了账号安全,请及时绑定邮箱和手机立即绑定

问下有关知识

<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
    function req(){
          var div = document.getElementById("div1");
          document.getElementById("li1").innerHTML = (div.offsetTop)+"px";//div1距离屏幕顶部的距离
          document.getElementById("li2").innerHTML = (div.offsetLeft)+"px";//div1距离屏幕左部的距离
          document.getElementById("li3").innerHTML = (div.scrollHeight)+"px";//
          document.getElementById("li4").innerHTML = (div.scrollWidth)+"px";//
     }
</script>
</head>
<body style="border:10px solid blue;padding:0px 0px;margin:5px 10px">
    <div style="width:60%;border-right:1px dashed red;float:left;">
        <div style="float:left;">
            <div id="div1" style="border:5px red solid;height:300px;width:200px;overflow:auto">
                <div style="height:500px;width:400px">请调整横竖滚动条后,点击按钮后查看offsetTop、offsetLeft、scrollTop、scrollLeft值。</div>
            </div>
            <input type="button" value="点击我!" onclick="req()" style="border: 1px solid purple;height: 25px;"/>
        </div>
        
    </div>
    <div style="width:30%;float:left;">
        <ul style="list-style-type: none; line-height:30px;">结果:
            <li>offsetTop : <span id="li1"></span></li>
            <li>offsetLeft : <span id="li2"></span></li>
            <li> scrollHeight : <span id="li3"></span></li>
            <li>scrollWidth : <span id="li4"></span></li>
        </ul>
        
    </div>
    <div style="clear:both;"></div>    
</body>
</html>



我想问下:scrollHeight和scrollWidth上节学得指元素实际占用的高度和宽度,可是与这章div1定义的宽高相差太远了

正在回答

1 回答

我知道怎么回事了!!!

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

问下有关知识

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信