JavaScript四大家族之client家族

简介: javascript 元素对象拥有client家族主要属性: clientHeight:  (可见区域高度:height+padding) clientWidth:  (可见区域宽度:width+padding) clientLeft  (资料显示是当前元素的offsetLeft距离当前...

javascript 元素对象拥有client家族主要属性:

 

clientHeight:  (可见区域高度:height+padding)

 

clientWidth:  (可见区域宽度:width+padding)

 

clientLeft  (资料显示是当前元素的offsetLeft距离当前窗口左边的距离,但通过我的测试发现值永远等于border-left,并且在w3c的DOM Element上找不到clientLeft相关信息)

 

clientTop  (资料显示是当前元素的offsetLeft距离当前窗口左边的距离,但通过我的测试发现值永远等于border-top,并且在w3c的DOM Element上找不到clientTop相关信息)

 

client可通过元素对象的属性clientWidth和clientHeight找到它。

 

但整个浏览器的滚动条即document的滚动条元素归属存在兼容性问题。

 

IE678以及其他浏览器认为整个文档对象属于document.documentElement元素的即html。

 

未声明DTD <!DOCTYPE html> 的浏览器认为文档对象属于document.body元素的。

 

所以只要找正确元素即可实现浏览器兼容。if(document.CompatMode==CSS1Compat)表示支持document.documentElement元素,else 表示支持document.body元素。

 

最新浏览器IE9+及其他浏览器都认为整个文档属于Window对象的,可通过Window.innerWidth和Window.innerHeight获得

 

注:参考网址http://www.w3school.com.cn/jsref/dom_obj_all.asp

目录
相关文章
|
1月前
|
存储 自然语言处理 前端开发
详谈JavaScript 二进制家族:Blob、File、FileReader、ArrayBuffer、Base64
详谈JavaScript 二进制家族:Blob、File、FileReader、ArrayBuffer、Base64
24 1
|
消息中间件 JavaScript 前端开发
Paho JavaScript Client 基于websocket实现 mqtt客户端
Paho JavaScript Client 基于websocket实现 mqtt客户端
189 0
|
Web App开发 存储 JSON
JS的二进制家族:Blob的具体介绍
Data URL对大家来说并不陌生,Web性能优化有一项措施:把小图片用base64编码直接嵌入到HTML文件中,实际就是利用了Data URL来获取图片数据。
|
JSON JavaScript 前端开发
JS的二进制家族:ArrayBuffer的具体介绍
ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区。ArrayBuffer 不能直接操作,而是要通过类型数组对象 或 DataView 对象来操作,它们会将缓冲区中的数据表示为特定的格式,并通过这些格式来读写缓冲区的内容。
|
存储 XML 前端开发
JS的二进制家族:Blob、ArrayBuffer和Buffer
ArrayBuffer:前端的一个通用的二进制缓冲区,类似数组,但在API和特性上却有诸多不同
JS的二进制家族:Blob、ArrayBuffer和Buffer
|
JavaScript 前端开发
JavaScript四大家族之scroll家族
javascript 元素对象拥有scroll家族主要属性:   ScrollTop:  (被滚动条卷去的头部高度)   ScrollLeft:  (被滚动条卷曲的左侧距离)   ScrollWidth  (内容实际宽度:width+padding+超出盒子的宽度)   ScorllHeight  (内容实际高度:height+padding+超出盒子的高度)   Scroll可通过元素对象的属性ScrollTop和ScrollLeft找到它。
1145 0
|
JavaScript 前端开发
JavaScript四大家族之offset家族
javascript 元素对象拥有offset家族5大属性(offset家族和position紧密相连)   offsetWidth:"元素内容的宽度"          (border+padding+width)   offsetHeight:"元素内容的高度"          (border...
1099 0
|
JavaScript 前端开发
JavaScript四大家族之event家族
event是javascript 元素对象的事件处理程序function(event){}所拥有的事件对象其中最主要(用的最多)的属性是   event对象存在兼容性。IE678的event对象为Window.
986 0
|
2月前
|
JavaScript
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
27 0