您的位置：首页 > Web前端 > JavaScript

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

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

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，强，值得努力学习。传智播客的视频教程是我的学习资源,推荐。
如果博文有可以改进的地方，请留下评论，我会认真思考的。
注：我是一位正在努力的普通人，此文仅供测试与参考使用，不可做其他用途。当参考博文内容时，代表您已接受使用条款。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航