DOM盒子模型常用属性client,offset和scroll小白知识_盒子入门基础

在JS中通过相关的属性可以获取(设置)元素的样式信息,这些属性就是盒子模型属性(基本上都是有关于样式的)属性值clienttop/left/width/heightoffsettop/left/width/height/parentscrolltop/left/width/height
<div

DOM盒子模型常用属性client,offset和scroll小白知识

在JS中通过相关的属性可以获取(设置)元素的样式信息,这些属性就是盒子模型属性(基本上都是有关于样式的)

DOM盒子模型常用属性client,offset和scroll小白知识_盒子入门基础

属性
clienttop/left/width/height
offsettop/left/width/height/parent
scrolltop/left/width/height

DOM盒子模型常用属性client,offset和scroll小白知识_盒子入门基础

<div id="outer">
<div id="inner">
        <div id="center"></div>
</div>
</div>

clientTop/Left/Width/Height

1.clientWidth & clientHeight:获取当前元素可视区域的宽高(内容的宽高+左右/上下PADDING, 和内容是否有溢出无关(和是否设置了OVERFLOW:HIDDEN也无关),就是我们自己设定的内容的宽高+PADDING

获取当前页面一屏幕(可视区域)的宽度和高度

document.documentElement.clientWidth || document.body.clientWidth
document.documentElement.clientHeight || document.body.clientHeight

2.clientTop & clientLeft:获取(上/左)边框的宽度

3.offsetWidth & offsetHeight:在client的基础上加上border(和内容是否溢出也没有关系)

4.offsetTop / offsetLeft:获取当前盒子距离其父级参照物的偏移量(上偏移/左偏移) 当前盒子的外边框开始~父级参照物的内边框

5.offsetParent:当前盒子的父级参照物,“参照物”:同一个平面中,元素的父级参照物和结构没有必然联系,默认他们的父级参照物都是BODY(当前平面最外层的盒子) BODY的父级参照物是NULL

center.offsetParent  //=>BODY
inner.offsetParent   //=>BODY
outer.offsetParent   //=>BODY

6.scrollWidth & scrollHeight:真实内容的宽高(不一定是自己设定的值,因为可能会存在内容溢出,有内容溢出的情况下,需要把溢出的内容也算上)+ 左/上PADDING,而且是一个约等于的值 (没有内容溢出和CLIENT一样), 在不同浏览器中,或者是否设置了OVERFLOW:HIDDEN都会对最后的结果产生影响,所以这个值仅仅做参考,属于约等于的值

获取当前页面的真实宽高(包含溢出的部分)

document.documentElement.scrollWidth || document.body.scrollWidth
document.documentElement.scrollHeight || document.body.scrollHeight

7.scrollTop / scrollLeft:滚动条卷去的宽度或者高度

在JS盒子模型13个属性中,只有scrollTop/scrollLeft是“可读写”属性,其余都是“只读”属性,操作浏览器的盒子模型属性,我们一般都要写两套,用来兼容各种模式下的浏览器

海计划公众号
(0)
上一篇 2020/03/26 23:28
下一篇 2020/03/26 23:28

您可能感兴趣的内容

  • flat-color-icons使用帮助_免费的平面颜色图标

    flat-color-icons使用帮助 官方网址:http://icons8.com/c/flat-color-icons GitHub:https://github.com/i…

    2020/03/06
  • colorable使用攻略_一款配色工具

    colorable使用攻略 官方网址:https://colorable.jxnblk.com GitHub:https://github.com/jxnblk/colorable…

    2020/03/06
  • CSS实现自适应正方形、等宽高比矩形小白基础_自适应小白知识

    1.利用vw、vh、vmin、vmax,vw表示的是viewport的宽度,也就是视口的宽度,vh表示的是视口的高度,vmin=min{vw,vh}取的是两者中较小的值,vmax ={vw,vh},1vm = 1% viewport width其他同理,所以利用上诉的单位来定义矩形的宽高即可实现等比变换。div{width :1vm;height:1vm;

    2020/03/31
  • ES6 新特性之Generator使用指南_特性基础教程

    1:基本概念实际上Generator就是遍历器的一个生成器,我们可以用Generator来生成一个遍历器。Generator有两个明显的特点:第一个是function关键字与函数名之间有一个星号,一般而言是将两者写在一起的。第二个是在函数体内部有一个yield的关键字。 function* generator(){yield 1;yield 2;ret

    2020/03/26
  • React 中 的 9 种优化技术使用攻略_优化小白攻略

    谷歌的数据表明,一个有 10 条数据 0.4 秒可以加载完的页面,在变成 30 条数据加载时间为 0.9 秒后,流量和广告收入减少了 20%。当谷歌地图的首页文件大小从 100kb 减少到 70~80kb 时,流量在第一周涨了 10%,接下来的三周涨了 25%。腾讯的前端工程师根据长期的数据监控也发现页面的一秒钟延迟会造成 9.4% 的 PV 的下降,8.3

    2020/03/24
  • 详解Js加法运算符小白基础_运算符入门百科

    简介JavaScript是一门了不起的语言。我喜欢它的灵活性:只需以你喜欢的方式做事:更改变量类型,动态的向对象添加方法或属性,对不同的变量类型使用运算符等等。然而动态是要付出代价的,开发人员需要知道怎样处理对于不同操作符的类型转换:加号(+),等号(==和===),不等号(!=和!==)等等,许多运算符有自己处理类型转换的方式。加法运算符最常用的运算符:+

    2020/03/23
  • 加密货币领域的 12 个关键问题攻略教程_加密小白常识

    在加密货币领域,哪些问题至关重要而又至今没有确切的答案?哪些问题对加密货币格局的最终形态和最佳公司的前景能产生最重大的影响?我想试着一一指出!用 12 条推文提出以下 12 个问题。1/ 去中心化问题就像生活和工程中所有美好的事物一样,去中心化不是免费的。去中心化在何时何地最为重要?新形成的加密技术堆栈的哪些部分应该去中心化,哪些部分并不需要?2/ 多元主义

    2020/03/23
  • css实用小技巧使用说明css常用技巧和经验总汇_css菜鸟指南

    如何清除图片下方出现几像素的空白间隙?方法1:img{display:block;}方法2:img{vertical-align:top;}除了top值,还可以设置为text-top | middle | bottom | text-bottom,甚至特定的和值都可以方法3:#test{font-size:0;line

    2020/04/03
  • 最终,我们放弃了微服务小白知识_微服务基础入门

    微服务被认为是一种理想的架构模式,因此,Steven Lemon 所在公司的领导层决定从单体架构向微服务架构迁移,这让整个开发团队在随后的的日子里苦不堪言,七大现实问题摆在面前无法解决,微服务架构的好处也没有享受到,并发现这不单单是一个技术问题。最终,整个团队决定放弃。领导决定:迁移微服务最近,我所在的开发团队在紧张的交付周期结束后,有了短暂的休息机会。领导

    2020/03/26
  • 在HTML中限制input 输入框只能输入纯数字菜鸟教程_表单小白指南

    1.使用 onkeyup 事件,有 bug ,那就是在中文输入法状态下,输入汉字之后直接回车,会直接输入字母onkeyup = “value=value.replace(/[^\d]/g,”)”2.使用 onchange 事件,在输入内容后,只有 input 丧失焦点时才会得到结果,并不能在输入时就做出响应onchange = “value=value.r

    2020/04/03
  • buefy基础入门_Bulma 和 Vue.js 的轻量级UI组件

    buefy基础入门 官方网址:https://buefy.org/ GitHub:https://github.com/buefy/buefy/ 简介描述:Bulma 和 Vue….

    2020/03/06
  • 怎么网上创业,网上挣钱做什么好?基础知识入门_创业入门攻略

    在网络迅速发展的今天,很多人已经放弃上班,而选择网上创业,成为一名真正的自由职业者。其实互联网世界本身就是现实生活的缩影,网上的每一个流量都对应的真实的一个人,所以有说:”流量就是金钱,只是看你如何变现”。选择的创业项目方式有很多种,很多人通过网络获得了人生的第一桶金,下面就为大家做下整理,根据你的资源,能力进行选择。创业项目一:博客类网站你首先需要买个域名

    2020/03/30
  • CSS 3中-webkit-, -moz-, -o-, -ms-这些私有前缀的含义和兼容小白基础_兼容使用帮助

    css3作为页面样式的表现语言,增加了很多新的属性,但是部分css3属性在一些浏览器上还处于试验阶段,所以为了有效的显示css3的样式,对应不同的浏览器内核需要不同的前缀声明,例如:-moz- :Firefox,GEcko引擎-webkit-: Safari和Chrome,Webkit引擎-o- :Opera(早期),Presto引擎,后改为Webkit引擎

    2020/04/06
  • iNstantLogo教程视频_在线免费LOGO设计工具

    iNstantLogo教程视频 官方网址:https://instantlogodesign.com/ 简介描述:在线免费LOGO设计工具 即时壁纸设计(iNstant Logo …

    2020/03/11
  • color hunt入门基础教程_漂亮炫酷的配色方案

    color hunt入门基础教程 官方网址:https://colorhunt.co/ 简介描述:漂亮炫酷的配色方案 ColorHunt 包含了一系列漂亮炫酷的色彩组合,网站会每天…

    2020/03/06
  • webpack 图片路径问题小白知识_图片基础入门

    今天在学 webpack 时碰到一个问题,就是 webpack 通过插件 file-loader 打包图片后,在最终的 html 文件中图片地址是不对的,只有图片名称是对的,相信应该也有很多和我一样的初学者掉坑了。解决方法:在 webpack.config.js 的配置文件中添加一个属性{test: /\.(png|svg|jpg)$/,use: [{loa

    2020/03/20