码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript基础 获取整个div的宽度 不含滚动条的宽度 向下滚动了多少px offsetWidth scrollWidth scrollTop

时间:2017-05-03 13:05:53      阅读:1090      评论:0      收藏:0      [点我收藏+]

标签:logs   rip   aof   png   视频   get   高度   html   code   

 镇场诗:
    清心感悟智慧语,不着世间名与利。学水处下纳百川,舍尽贡高我慢意。
    学有小成返哺根,愿铸一良心博客。诚心于此写经验,愿见文者得启发。
——————————————————————————————————————————

code:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<style type="text/css">
        #content{
            width:450px;
            height:350px;
            border:1px solid blue;
            margin:20px auto;
            overflow:auto;/*超出的部分自动有滚动条*/
        }
	</style>
    <script type="text/javascript">
        //当拖动滚动条时,运行这个函数
        function ShowData()
        {
            //展示结果的p标签
            var dataShowPObj = document.getElementById("dataShowDivObj");
            //内容的div标签
            var content = document.getElementById("content");

            //多了2px是边框线
            var dataOfContent = "整个div的宽度是" + content.offsetWidth + ",高度是" + content.offsetHeight;
            dataOfContent += "<br />";
            dataOfContent += "不含滚动条的宽度是" + content.scrollWidth + ",总的文字的高度是" + content.scrollHeight;
            dataOfContent += "<br />";
            dataOfContent += "向下滚动了"+content.scrollTop;
            dataShowPObj.innerHTML = dataOfContent;
        }
        //在我学习这个效果的时候,我的天呀,这个忘记加,那个记错了。。。
        //真可谓是 基础不牢,地动山摇。
    </script>
</head>
<body>
    <div id="content" onscroll="ShowData()">
        须菩提。若有人言。如来若来若去。若坐若卧。是人不解我所说义。何以故。如来者。无所从来。亦无所去。故名如来。

<br />金刚经 第三十品 一合理相分<br />

须菩提。若善男子。善女人。以三千大千世界碎为微尘。于意云何。是微尘众宁为多不。甚多。世尊。何以故。若是微尘众实有者。佛即不说是微尘众。所以者何。佛说。微尘众。即非微尘众。是名微尘众。世尊。如来所说三千大千世界。即非世界。是名世界。何以故。若世界实有。即是一合相。如来说。一合相。即非一合相。是名一合相。须菩提。一合相者。即是不可说。但凡夫之人贪著其事。

<br />金刚经 第三十一品 知见不生分<br />

须菩提。若人言。佛说我见人见众生见寿者见。须菩提。于意云何。是人解我所说义不。不也。世尊。是人不解如来所说义。何以故。世尊说。我见人见众生见寿者见,即非我见人见众生见寿者见,是名我见人见众生见寿者见。须菩提。发阿耨多罗三藐三菩提心者。于一切法。应如是知。如是见。如是信解。不生法相。须菩提。所言法相者。如来说即非法相。是名法相。

<br />金刚经 第三十二品 应化非真分<br />

须菩提。若有人以满无量阿僧祗世界七宝持用布施。若有善男子。善女人发菩提心者。持于此经。乃至四句偈等。受持读诵。为人演说。其福胜彼。云何为人演说。不取于相。如如不动。何以故。一切有为法。如梦幻泡影。如露亦如电。应作如是观。佛说是经已。长老须菩提。及诸比丘。比丘尼。优婆塞。优婆夷。一切世间天人阿修罗。闻佛所说。皆大欢喜。信受奉行。
    </div>
    <div id="dataShowDivObj"></div>
</body>
</html>

 



result:

  初始状态:

技术分享

 

  滚动后:

技术分享

 



——————————————————————————————————————————
博文的精髓,在技术部分,更在镇场一诗。IDE: VS2015;浏览器: Firefox。
html+css+js,强,值得努力学习。传智播客的视频教程是我的学习资源,推荐。
如果博文有可以改进的地方,请留下评论,我会认真思考的。

注:我是一位正在努力的普通人,此文仅供测试与参考使用,不可做其他用途。当参考博文内容时,代表您已接受使用条款。

JavaScript基础 获取整个div的宽度 不含滚动条的宽度 向下滚动了多少px offsetWidth scrollWidth scrollTop

标签:logs   rip   aof   png   视频   get   高度   html   code   

原文地址:http://www.cnblogs.com/shemingli/p/6801224.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!