JS盒子模型属性

  • 在JS中通过相关的属性可以获取(设置)元素的样式信息,这些属性就是盒子模型属性(基本上都是有关于样式的)
属性
client top/left/width/height
offset top/left/width/height/parent
scroll top/left/width/height

  1. <div id="outer">
  2. <div id="inner">
  3. <div id="center"></div>
  4. </div>
  5. </div>

**clientTop/Left/Width/Height **

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

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

  1. document.documentElement.clientWidth || document.body.clientWidth
  2. document.documentElement.clientHeight || document.body.clientHeight
  • 2.clientTop & clientLeft:获取(上/左)边框的宽度

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

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

  • 5.offsetParent:当前盒子的父级参照物

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

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

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

  1. document.documentElement.scrollWidth || document.body.scrollWidth
  2. document.documentElement.scrollHeight || document.body.scrollHeight
  • 7.scrollTop / scrollLeft:滚动条卷去的宽度或者高度

    最小卷去值:0

    最大卷去值:真实页面的高度 - 一屏幕的高度 document.documentElement.scrollHeight-document.documentElement.clientHeight

    在JS盒子模型13个属性中,只有scrollTop/scrollLeft是“可读写”属性,其余都是“只读”属性

    操作浏览器的盒子模型属性,我们一般都要写两套,用来兼容各种模式下的浏览器

通过JS盒模型属性获取值的特点

  • 1.获取的都是数字不带单位
  • 2.获取的都是整数,不会出现小数(一般都会四舍五入,尤其是获取的 偏移量)
  • 3.获取的结果都是复合样式值(好几个元素的样式组合在一起的值),如果只想获取单一样式值(例如:只想获取PADDING),我们的盒子模型属性就操作不了了 ,这不能说没有用,真实项目中,有时候我们就是需要获取组合的值来完成一些操作

**[获取元素具体的某个样式值] **

1.[元素].style.xxx 操作获取

只能获取所有写在元素行内上的样式(不写在行内上,不管你写没写都获取不到,真实项目中我们很少会把样式写在行内上),outer.style.width =>'' (width是写在样式表中的)

2.获取当前元素所有经过浏览器计算的样式

经过计算的样式:只要当前元素可以在页面中呈现(或者浏览器渲染它了),那么它的样式都是被计算过的

不管当前样式写在哪,不管你是否写了(浏览器会给元素设置一些默认样式)

标准浏览器(IE9+)

window.getComputedStyle([元素],[伪类,一般都写null]) 获取到当前元素所有被浏览器计算过的样式(对象)

IE6~8

[元素].currentStyle 获取经过计算的样式

DOM盒子模型常用属性client,offset和scroll的更多相关文章

  1. javascript基础学习系列-DOM盒子模型常用属性

    最近在学习DOM盒子模型,各种属性看着眼花缭乱,下面根据三个系列来分别介绍一下: client系列 clientWidth :width+(padding-left)+(padding-right)— ...

  2. DOM盒模型和位置 client offset scroll 和滚动的关系

    DOM盒模型和位置 client offset scroll 和滚动的关系 概览 在dom里面有几个描述盒子位置信息的值, pading border margin width height clie ...

  3. div介绍 盒子模型边框属性 CSS初始化 文字排版 边框调整 溢出

    今天学习的div,了解了div是干什么用的掌握了什么是盒子模型,以及div的外边距内边距以及边框,运用div和CSS给文字排版,利用边框的来做图像,div溢出的处理 CSS初始化: 精确排版的时候用这 ...

  4. js中盒子模型常用的属性你还记得几个?

    //clientWidth;//内容宽度Width+左右填充padding//clientHeight;//内容高度height+上下填充padding//clientLeft;//左边框的宽度相当于 ...

  5. W3c盒子模型+IE盒子模型+box-sizing属性

    1.盒子模型有两种,标准盒模型和IE盒模型,其中W3C标准的盒模型就是在网页的顶部加上 DOCTYPE 声明. (1)W3C标准的盒模型 W3C盒子模型包括4部分:margin,border,padd ...

  6. DOM盒子模型

    获取行间样式 style.height //获取行间样式高度 xx.currentStyle.height //计算后的样式高度 IE低版本 getComputedStyle().height //获 ...

  7. CSS布局(二) 盒子模型属性

    盒子模型的属性 宽高width/height 在CSS中,可以对任何块级元素设置显式高度. 如果指定高度大于显示内容所需高度,多余的高度会产生一个视觉效果,就好像有额外的内边距一样: 如果指定高度小于 ...

  8. 盒子模型的overflow属性,border属性,padding与margin属性

    今天要写的是CSS布局—盒子模型 首先说一下CSS的整体布局: 它包括容器(container),页眉(header),导航条(navbar),页面主要内容(main),菜单(menu),主要内容(c ...

  9. js的DOM的方法和属性总结

    1.DOM的获取元素document.getElementById()context.getElementsByTagName(tag) (可以获取相应上下文环境所有的tag标签)context.ge ...

随机推荐

  1. linux之压缩和解压

    归档:也称为打包,指的是一个文件或目录的集合,而这个集合被存储在一个文件中.归档文件没有经过压缩,因此,它占用的空间是其中所有文件和目录的总和.压缩:压缩文件也是一个文件和目录的集合,且这个集合也被存 ...

  2. Mysql优化(出自官方文档) - 第八篇(索引优化系列)

    目录 Mysql优化(出自官方文档) - 第八篇(索引优化系列) Optimization and Indexes 1 Foreign Key Optimization 2 Column Indexe ...

  3. 逆向破解之160个CrackMe —— 017

    CrackMe —— 017 160 CrackMe 是比较适合新手学习逆向破解的CrackMe的一个集合一共160个待逆向破解的程序 CrackMe:它们都是一些公开给别人尝试破解的小程序,制作 c ...

  4. Guava 常用工具类

    引入guava包: <dependency> <groupId>com.google.guava</groupId> <artifactId>guava ...

  5. Java之Exception

    Exception这个东西,程序中必须会有的,尽管我们很不乐意看到它,可是从另一个角度考虑,有异常则说明程序有问题,有助于我们及时改正.有的时候程序出错的原因有很多,比如不合法的输入.类型.空指针甚至 ...

  6. Jenkins教程——从安装到部署Docker服务(二)声明式流水线HelloWorld

    前言 本文通过一个声明式流水线的HelloWorld程序做一下流水线基础入门,对常用的流水线参数进行简要说明 什么是流水线 现实中的流水线 流水线比较好理解,类比于现实生活中的生产流水线,每个流程只做 ...

  7. 前端测试工具之 postman

    1.不论你是一个前端工程师还是一个后端工程师相信这款工具都会使你的开发更加简便. 2.在此我推荐的一款软件工具是 postman . 在这里我对 postman 做一个简单的介绍: ①它能够模拟表单发 ...

  8. NLP(二十三)使用LSTM进行语言建模以预测最优词

    N元模型 预测要输入的连续词,比如 如果抽取两个连续的词汇,则称之为二元模型 准备工作 数据集使用 Alice in Wonderland 将初始数据提取N-grams import nltk imp ...

  9. lightoj 1036 - A Refining Company(简单dp)

    题目链接:http://www.lightoj.com/volume_showproblem.php?problem=1036 题解:设dp[i][j]表示处理到(i,j)点时的最大值然后转移显然是 ...

  10. HDU2276 Kiki & Little Kiki 2 矩阵快速幂

    Kiki & Little Kiki 2 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java ...