一、clientXXX 属性

代码演示

// css 部分
<style>
.test{
width:100px;
height:100px;
border:1px solid red;
padding:20px;
}
</style>
// body 和 js 部分
<div class="test">
hello
</div>
<script>
var div = document.getElementsByTagName('div')[0];
console.log(div.clientWidth);
console.log(div.clientHeight)
console.log(div.clientTop)
console.log(div.clientLeft)
  // 注意不含有以下两个属性
// console.log(div.clientRight)
// console.log(div.clientBottom)
</script>

控制台打印输出(结果)

根据答应结果和div盒子模型比较可得:

  clientWidth = padding值*2(左右padding值) + width 值;

  clientHeight = padding值*2(上下padding值) + height 值;

  clientTop = border值(上边框值)

  clientLeft = border值(左边框值)

二、offsetXXX 属性

js代码

<script>
var div = document.getElementsByTagName('div')[0];
console.log(div.offsetWidth);
console.log(div.offsetHeight)
console.log(div.offsetTop)
console.log(div.offsetLeft)
  //注意: 以下两个属性不存在
console.log(div.offsetRight)
console.log(div.offsetBottom)
</script>

打印结果分析

div盒子模型

body 盒子模型

由以上两个模型分析得出

  offsetWidth = 左右padding值+width值+左右border值

   offsetHeight = 上下padding值+height值+上下border值

   offsetTop 表示该元素的边框上边缘与它最近父元素的上边框内边缘的距离,如果没有父元素则把body当做它的父元素,由此知(默认情况下body有个margin值8px)

   offsetTop = 8

   offsetLeft = 8

JS之clientWidth、offsetWidth等属性介绍的更多相关文章

  1. js中clientWidth, scrollWidth, innerWidth, outerWidth,offsetWidth的区别

    js中clientWidth, scrollWidth, innerWidth, outerWidth,offsetWidth的属性汇总,测试浏览器:ie7~ie11.chrome 和 firefox ...

  2. JS中关于clientWidth offsetWidth scrollWidth 的区别及意义

    网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...

  3. HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth

    HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对 ...

  4. HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解

    HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解 scrollHeight: 获取对象的滚动高度. scrollLe ...

  5. scrollLeft,scrollWidth,clientWidth,offsetWidth 可实现导航栏固定不动(冻结)的效果

    HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth  scrollHeight: 获取对象的滚动高度.  scrollLeft:设置或获取位 ...

  6. HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之全然具体解释

      HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth究竟指的哪到哪的距离之全然具体解释scrollHeight: 获取对象的滚动高度. scrol ...

  7. clientWidth,offsetWidth,scrollWidth区别

    <html> <head> <title>clientWidth,offsetWidth,scrollWidth区别</title> </head ...

  8. H5,PC网页屏幕尺寸相关整理(scrollLeft,scrollWidth,clientWidth,offsetWidth)

    HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解scrollHeight: 获取对象的滚动高度. scrollLef ...

  9. HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth完全详细的说明

      HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth具体指完全解释究竟哪里的距离scrollHeight: 获取对象的高度滚动. scrollLe ...

  10. 转 HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解

    HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解 scrollHeight: 获取对象的滚动高度. scrollLe ...

随机推荐

  1. HTML--表格与表单(练习做注册页面)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 如何简单易懂地描述REST接口编程

    网上很多关于REST的介绍,看起来都是云里雾里的,就像在看论文一样,晦涩难懂, 这里有一个链接大概可以简单明了地描述:https://www.zhihu.com/question/28557115

  3. halcon视频教程如何学习?怎么样才能踏入机器视觉这个行业?

    本人是工作八年的视觉工程师,主要从事Halcon和Visionpro视觉开发,谈谈个人对视觉学习看法: 1.HALCON是德国MVtec公司开发的一套完善的标准的机器视觉算法包,它节约了产品成本,缩短 ...

  4. Android的日期选择器

    TimePicker(时间选择器) 方法 描述 Integer getCurrentHour () 返回当前设置的小时 Integer getCurrentMinute() 返回当前设置的分钟 boo ...

  5. vscode vue开发环境搭建

    以前仅了解过VUE但没有真正上手过,现在因为工作需要准备再近几个月里系统的学习一下这款超火的前端框架,希望大佬们指教. ---------------------------------------- ...

  6. 微信小程序中悬浮窗功能的实现(主要探讨和解决在原生组件上的拖动)

    问题场景 所谓悬浮窗就是图中微信图标的按钮,采用fixed定位,可拖动和点击. 这算是一个比较常见的实现场景了. 为什么要用cover-view做悬浮窗?原生组件出来背锅了~ 最初我做悬浮窗用的不是c ...

  7. 【有容云案例系列】基于Jenkins和Kubernetes的CI工作流

    嘉宾介绍 黄文俊 有容云资深系统架构师 主要负责容器云平台产品架构及设计. 8年工作经验, 有着企业级存储, 云计算解决方案相关理解. 关注于微服务设计思考, 开发流程优化, docker及kuber ...

  8. 使用 PowerShell 远程管理

    要求 PowerShell 版本要求至少是2.0版本以上,目前PowerShell 2.0 支持最低的操作系统版本为Windows XP.本次操作使用的是 PowerShell 5.1 请使用管理员身 ...

  9. javascript基础案例解析

    学完了JavaScript基础部分,总结出一些基本案例,以备日后查看! 1.九九乘法口诀表:在控制台中输出九九乘法口诀表!代码如下: <!DOCTYPE html> <html> ...

  10. Mermaid

    graph TD; A-->B; A-->C; B-->D; C-->D;