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

目录
相关文章
|
2月前
|
JavaScript 前端开发 开发工具
【Azure Developer】使用JavaScript通过SDK进行monitor-query的client认证报错问题
AADSTS90002: Tenant 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' not found. Check to make sure you have the correct tenant ID and are signing into the correct cloud. Check with your subscription administrator, this may happen if there are no active subscriptions for the tenant.
|
7月前
|
存储 自然语言处理 前端开发
详谈JavaScript 二进制家族:Blob、File、FileReader、ArrayBuffer、Base64
详谈JavaScript 二进制家族:Blob、File、FileReader、ArrayBuffer、Base64
273 1
|
存储 XML 前端开发
JS的二进制家族:Blob、ArrayBuffer和Buffer
ArrayBuffer:前端的一个通用的二进制缓冲区,类似数组,但在API和特性上却有诸多不同
JS的二进制家族:Blob、ArrayBuffer和Buffer
|
消息中间件 JavaScript 前端开发
Paho JavaScript Client 基于websocket实现 mqtt客户端
Paho JavaScript Client 基于websocket实现 mqtt客户端
285 0
|
Web App开发 存储 JSON
JS的二进制家族:Blob的具体介绍
Data URL对大家来说并不陌生,Web性能优化有一项措施:把小图片用base64编码直接嵌入到HTML文件中,实际就是利用了Data URL来获取图片数据。
|
JSON JavaScript 前端开发
JS的二进制家族:ArrayBuffer的具体介绍
ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区。ArrayBuffer 不能直接操作,而是要通过类型数组对象 或 DataView 对象来操作,它们会将缓冲区中的数据表示为特定的格式,并通过这些格式来读写缓冲区的内容。
|
缓存 JavaScript 前端开发
Timers和进程在Client里的性能表现实战心得【Node.js】
Timers和进程在Client里的性能表现实战心得【Node.js】
|
JavaScript 前端开发
JavaScript四大家族之scroll家族
javascript 元素对象拥有scroll家族主要属性:   ScrollTop:  (被滚动条卷去的头部高度)   ScrollLeft:  (被滚动条卷曲的左侧距离)   ScrollWidth  (内容实际宽度:width+padding+超出盒子的宽度)   ScorllHeight  (内容实际高度:height+padding+超出盒子的高度)   Scroll可通过元素对象的属性ScrollTop和ScrollLeft找到它。
1186 0
|
JavaScript 前端开发
JavaScript四大家族之offset家族
javascript 元素对象拥有offset家族5大属性(offset家族和position紧密相连)   offsetWidth:"元素内容的宽度"          (border+padding+width)   offsetHeight:"元素内容的高度"          (border...
1142 0
|
JavaScript 前端开发
JavaScript四大家族之event家族
event是javascript 元素对象的事件处理程序function(event){}所拥有的事件对象其中最主要(用的最多)的属性是   event对象存在兼容性。IE678的event对象为Window.
1028 0