BOM基础（二）
跟DOM一样，BOM其实也是由很多的API组成。 不过对于BOM来说，最痛苦的不是不记得API，而是明明记得这个这个API，却没有考虑到它的兼容性。
之前的文章中讲到了offset系列的属性，他的宽高是由border，padding和width组成的。而它的offsetLeft和offsetTop则是相对于offsetParent的距离。这里的offsetParent指的是子盒子有定位的父级元素，而如果子盒子没有有定位的父级元素，那么它的offsetParent就是body。讲过了offset系列的，就该讲讲scroll系列的了。
首先就来说说scrollWidth和scrollHeight这两个属性分别获取的是元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box {
width: 100px;
height: 100px; border: 5px solid red;
padding: 10px;;
}
</style>
</head>
<body>
<div id="box">
啦啦啦
啦啦啦
啦啦啦
啦啦啦
啦啦啦
啦啦啦
啦啦啦
啦啦啦
啦啦啦
啦啦啦
啦啦啦
啦啦啦
啦啦啦
啦啦啦
啦啦啦
啦啦啦
啦啦啦
啦啦啦
啦啦啦
啦啦啦
啦啦啦
啦啦啦
啦啦啦
啦啦啦
啦啦啦
啦啦啦
</div>
<script>
var box = document.getElementById("box");
console.log(box.scrollHeight);
console.log(box.offsetHeight);
</script>
</body>
</html>
上述代码分别输出了div的scrollHeight和offsetHeight，在控制台中，这两个属性打印的值分别是297和130；第二个值没有问题，他就是盒子上下边框宽加上下内边距加高度后得来的。而第一个值，获取的则是撑开之后的大小。可能对于这个值具体的算法有疑问，不过，在实际开发中一般不会出现有很大的内边距和边框时要你使用scrollHeight值的。所以不必太纠结为什么是这个数值，我们只要知道这个数值是随着内容的改变而改变就好了。scrollHeight值得算法是如果内容区域小于上下内边距加高度，那么它的值就是上下内边距加高度，否则就是内容撑开的高度。scrolltLeft也是同理。
而说完了scrollHeight和scrollLeft之后，就该来说说scrollTop和scrollLeft了，这两个值的用法相同。所以就来说说其中的offsetTop；一般来说，这两个属性都会配上鼠标移动事件来使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box {
width: 100px;
height: 100px; overflow: auto;
}
</style>
</head>
<body>
<div id="box">
老王走了
老王走了
老王走了
老王走了
老王走了
老王走了
老王走了
老王走了
老王走了
老王走了
老王走了
老王走了
老王走了
老王走了
老王走了
</div>
<script src="common.js"></script>
<script>
var box = my$("box");
box.onscroll = function () {
console.log(box.scrollTop);
} </script>
</body>
</html>
上述代码在拉动滚动条的时候执行，输出div的scrollTop。scrollTop显示的是内容区域向上移动的距离。
上面的代码获取的只是那个小的div中的滚动事件，那么如果在页面中呢？我们就可以把整个页面看做是一个div。这时候就遇到一个问题了，页面到底是body呢，还是html呢？其实，不同的浏览器有不同的解析方式。这时候，我们就要封装兼容性代码了。
function scroll() {
return {
scrollLeft:document.body.scrollLeft || document.documentElement.scrollLeft,
scrollTop:document.body.scrollTop || document.documentElement.scrollTop
};
}
在这里，我们封装了一个scroll函数，用来返回一个对象，这个对象有两个属性，这两个属性在调用的时候可以获取页面的滚动距离，并且，如果浏览器是根据body来获取或者根据html来获取他都能兼容。
BOM基础（二）的更多相关文章
- BOM基础 计时器 定时器 DOM 基础
-------------------------------------------滴水穿石,我心永恒. day48 CSSJS 1 ECMA script 2 BOM browser object ...
- Python全栈开发【基础二】
Python全栈开发[基础二] 本节内容: Python 运算符(算术运算.比较运算.赋值运算.逻辑运算.成员运算) 基本数据类型(数字.布尔值.字符串.列表.元组.字典) 其他(编码,range,f ...
- Bootstrap <基础二十九>面板（Panels）
Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .pa ...
- Bootstrap <基础二十八>列表组
列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...
- Bootstrap<基础二十七> 多媒体对象（Media Object）
Bootstrap 中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐.媒体对象可以用更少的 ...
- Bootstrap <基础二十六>进度条
Bootstrap 进度条.在本教程中,你将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet ...
- Bootstrap <基础二十五>警告（Alerts）
警告(Alerts)以及 Bootstrap 所提供的用于警告的 class.警告(Alerts)向用户提供了一种定义消息样式的方式.它们为典型的用户操作提供了上下文信息反馈. 您可以为警告框添加一个 ...
- Bootstrap<基础二十四> 缩略图
Bootstrap 缩略图.大多数站点都需要在网格中布局图像.视频.文本等.Bootstrap 通过缩略图为此提供了一种简便的方式.使用 Bootstrap 创建缩略图的步骤如下: 在图像周围添加带有 ...
- Bootstrap <基础二十三>页面标题（Page Header）
页面标题(Page Header)是个不错的功能,它会在网页标题四周添加适当的间距.当一个网页中有多个标题且每个标题之间需要添加一定的间距时,页面标题这个功能就显得特别有用.如需使用页面标题(Page ...
- Bootstrap <基础二十二>超大屏幕（Jumbotron）
Bootstrap 支持的另一个特性,超大屏幕(Jumbotron).顾名思义该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin).使用超大屏幕(Jumbotron)的步骤如下: ...
随机推荐
- JSP/Servlet(一)
JSP/Servlet(一) Web应用和web.xml文件: 一.构建Web应用: 1.在任意目录下创建一个文件夹. 2.在第1步所建的文件夹内建一个WEB-INF文件夹(注意大小写). 3.进 ...
- cookie、session、sessionid的区别
我们都知道银行,银行的收柜台每天要接待客户存款/取款业务,可以有几种方案: 1.凭借柜台职员的记忆,由收柜台职员来为每位顾客办理存款/取款业务,单凭职员的记忆力,要记到每位顾客的相貌,并迅速这个顾客当 ...
- FMS4中的P2P功能
在fms4以前Adobe只允许在stratus中才能使用p2p功能.令人高兴的是,在最新发布的fms4中,p2p功能已经集成进来了,这将给实时视频类的应用带来更高的效率,adobe这次很给力! 为了使 ...
- Flex移动应用程序开发的技巧和窍门(二)
范例文件 flex-mobile-dev-tips-tricks-pt2.zip 这是关于Flex移动应用程序开发的技巧和窍门的一系列文章中的第二部分.第一部分 内容主要集中讨论了视图之间以及应用程序 ...
- C++中的Traits技法
Traits广泛应用于标准程序库.Traits classes使得"类型相关信息"在编译期可用. 认真读完下面的示例,你应该就懂了Traits技法,其实并不难. #include ...
- Android开发系列之Context
相信大家对于Context应该非常熟悉,但是Context到底是什么意思呢?到底指的是什么东西呢?我们可以理解为当前对象在程序中所处的一个环境,一个与系统交互的过程.Android系统的上下文对象,即 ...
- 3D游戏开发之在UE4中创建非玩家角色(NPC)
接着上节我们继续学习,现在我们来创建一些NPC(non-playable characters,非玩家角色).在这个游戏中,当我们靠近NPC时,它们会做出相应的反应. 一 创建C++类 1) 在UE编 ...
- 关于在VI中查看BIN文件二进制值不对的问题
通常,我们在vim中,可以使用命令 %!xxd 来查看文件对应的二进制值.但是最近发生了一个事情,查看到的BIN文件二进制值和直接用hexdump打印出来的不一样. 经过检查定位,发现是因为vimrc ...
- Socket层上的协议
Socket层上的协议指的数据传输的格式 HTTP协议 传输格式:假设:这是假设,实际http的格式不是这样的. http1.1,content-type:multipart/form-data,co ...
- ubuntu 压缩软件
7-zip 安装: sudo apt-get install p7zip-full 使用方法: 7z x file file是你要解压的文件名 更多使用方法: man 7z rar sudo apt- ...