JavaScript四大家族之client家族

最新推荐文章于 2023-03-08 16:43:02 发布

ddhrzyt4028

最新推荐文章于 2023-03-08 16:43:02 发布

阅读量140

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Gxqsd/p/7337651.html

版权

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

转载于:https://www.cnblogs.com/Gxqsd/p/7337651.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ddhrzyt4028

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

100天精通鸿蒙从入门到跳槽——第2天：探究 ArkTS、TypeScript 和 JavaScript 之间的关系

猫头虎：授渔优于赠鱼，兴趣引领智慧，探索之乐尤显珍贵。商务合作：Libin9iOak，共赴知识与乐趣的探索之旅！

01-17

6万+

本文会深入探讨ArkTSTypeScript和JavaScript之间的关系。我们首先了解了TypeScript是如何扩展JavaScript的，以及它为开发带来的优势。然后，我们将注意力转向 ArkTS，它是在TypeScript的基础上构建的，专门为开发跨端应用而设计。通过深入了解这三种技术，读者将在100天内掌握HarmonyOS的强大功能，实现在新技术领域的快速成长。本文通过分析ArkTS、TypeScript和JavaScript之间的关系，揭示了它们在HarmonyOS编程领域中的重要作用。

《JavaScript100例|01》之javaScript实现俄罗斯方块，唤起了女朋友儿时的回忆！

孙叫兽的博客

08-26

3882

导读：小时候我们经常打游戏玩俄罗斯方块，用的是游戏机。现在我们学会了敲代码，简单用JS实现一下这个游戏把。目录先看效果操作说明代码实现完整代码先看效果操作说明打开编译器，讲代码复制进去，在浏览器打开即可，通过键盘上下左右控制，一个人就可以玩耍。 ↑控制方块的形态（可以使方块旋转），←向左平移，→向右平移，↓加速下落。方块铺满可以消失，方块排列到顶部游戏gameover. 代码实现 CSS <style type="text/css">...

参与评论您还未登录，请先登录后发表或查看评论

三大家族scroll、offset、client

梅花寺

03-08

691

三大家族区别offset家族 offsetHeight: 元素高，height+border+padding offsetWidth: 元素宽，width+border+padding offsetTop: 上边距离带有定位的父盒子的距离（重要） offsetLeft: 左边距离带有定位的父盒子的距离（重要） offsetParent: 最近的带有定位的父盒子。

JavaScript 特效之四大家族（offset/scroll/client/event）

carriehaohao的博客

03-06

1983

JS四大家族三大系列：offset、scroll、client 事件对象：event（事件被触动时，鼠标和键盘的状态）（通过属性控制）三大系列都是以DOM元素节点的属性形式存在的。类比访问关系，也是以属性形式存在。不同点在于，访问关系是为了获取其他节点，而三大系列是为了获取元素节点更多的信息。

client家族

Chaney__Chen的博客

12-17

398

一.client家族1.clientWidth和clientHeight 网页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 1.2.clientLeft和clientTop 返回的是元素边框的borderWidth，如果不指定一个边框或者不定位改元素，其值就为0 1.3.offset、client和sc

javascript client mqtt websocket

05-21

标题中的“javascript client mqtt”指的是使用JavaScript编程语言实现的MQTT客户端。JavaScript是Web开发中广泛使用的脚本语言，可以在浏览器环境中运行，这使得它非常适合于构建基于Web的物联网应用。在...

WebClient-[removed]MapGIS Client for JavaScript，是一款云GIS网络客户端开发平台。实现了传统WebGIS与云GIS的完美融合；还集成了Echarts、MapV、D3等四大主流地图开源框架和可视化库，进一步增强了大数据和实时流数据的高效可视化表达和分析

07-23

MapGIS Client for JavaScript：是增强的MapGIS Web开发平台，集成Openlayers、Leaflet、MapBox、Cesium等框架，ECharts、MapV、D3等可视化库，在传统WebGIS开发基础之上，增强大数据、实时流数据的高效可视化表达和...

Python3 websocket server与client及javascript client通信实现原理

leemboy的博客

03-05

6931

WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。 WebSocket通信协议于2011年被IETF定为标准RFC 6455，并被RFC7936所补充规范。WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中，...

client 家族

weixin_42630688的博客

07-13

191

1.clientWidth/clientHeight 获取网页可视区域宽、高调用者不同，意义不同调用者为div时，代表盒子本身宽、高调用者为body/html时，代表可视区域宽、高2.clientX/clientY 鼠标距离可视区域距离通过event 调用3.clientTOP/clientLeft 盒子的border ...

client家族属性

weixin_30355437的博客

09-18

162

在前面总结了offset家族属性和scroll家族属性，今天来总结一下client家族属性，同前面一样，client家族也包宽高和左上，具体的通过代码来区别这三大家族属性的不同。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <titl...

JavaScript - WebAPI - 可视家族 - client家族

Henry_ID的博客

08-14

226

client家族（元素可视区域大小） client家族： clientWidth/clientHeight：获取可视区域的宽高（padding+content） clientTop/clientLeft:不常用，其实就是左边框border-left和上边框border-top 获取网页可视区域大小本小节知识点 1.监听浏览器窗口变化的事件: window.onresize() 2.获取页面的可视区域存在浏览器兼容问题，兼容情况与scroll家族基本类似谷歌/火狐： window.inner

client家族 / offset家族 / scroll家族

qq_43776742的博客

12-14

277

client家族 client家族 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box ...

三大家族之client案例

Xian_Nv_Ling的博客

07-17

243

要实现在页面中鼠标点到哪里图片就在哪里显示。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style>

js学习笔记（三大家族—client家族、冒泡机制）

dawanhjiao的博客

05-05

216

client家族 1.概念 clientWidth:网页可见区域的宽 clientHeight:网页可见区域的高 clientLeft、clientTop:元素边框的宽 2.offset、client、scroll的区别分析（1）left和top （2）width和height <!DOCTYPE html> <html lang="en"> <head> ...

详解offset家族 scroll家族 client家族

cai_niao5623的博客

09-26

147

一、offset家族 1、简介 offsetWidth =width+padding+border //获取元素的宽度 offsetHeight =Height+padding+border //获取元素的高度 offsetLeft： //返回距离上级盒子（带有定位）左边的距离, ...

【每日知识】 offset，scroll家族，client家族

qq_46580087的博客

03-17

635

不乱于心，不困于情。不畏将来，不念过往。如此，安好。

JavaScript四大家族之event家族

ddhrzyt4028的博客

08-09

112

event是javascript 元素对象的事件处理程序function(event){}所拥有的事件对象其中最主要（用的最多）的属性是 event对象存在兼容性。IE678的event对象为Window.event，其他浏览器为event，兼容写法为var event = event || window.event; clientX　　　　　　　　（距离浏览器左侧的距离...

owt-client-javascript