JS盒子模型属性

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

    <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:滚动条卷去的宽度或者高度

    最小卷去值: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. ZooKeeper系列(三)—— Zookeeper 常用 Shell 命令

    一.节点增删改查 1.1 启动服务和连接服务 # 启动服务 bin/zkServer.sh start #连接服务 不指定服务地址则默认连接到localhost:2181 zkCli.sh -serv ...

  2. 干货 | Elasticsearch、Kibana数据导出实战

    1.问题引出 以下两个导出问题来自Elastic中文社区. 问题1.kibana怎么导出查询数据? 问题2:elasticsearch数据导出 就像数据库数据导出一样,elasticsearch可以么 ...

  3. (转载)分享常用的GoLang包工具

    分享常用的GoLang包工具 包名 链接地址 备注 Machinery异步队列 https://github.com/RichardKnop/machinery Mqtt通信 github.com/e ...

  4. python学习之路(3)---列表

    列表定义: 列表就是一个数据的集合,列表是可以重复的,可以对存储的数据进行增删改查, 列表的写法: list_name = ['ljwang','wangwu'] 列表的嵌套 a = ['1',['2 ...

  5. 结合suctf-upload labs-RougeMysql再学习

    这篇主要记录一下这道题目的预期解法 做这道题首先要在自己的vps搭建一个rouge mysql,里面要填写需要读取客户端的文件名,即我们上传的phar文件路径 先搭一个rouge mysql测试看看: ...

  6. 基于注解的SpringAOP源码解析(三)

    注意,读完本篇文章需要很长很长时间 在之前的2篇文章:AOP源码分析(一)AOP源码分析(二) 中,我们搭建了SpringAOP源码分析的环境,介绍了@EnableAspectJAutoProxy注解 ...

  7. zookeeper的leader选举机制个人总结

    第一步:每个服务器都首先投自己,格式为<sid,zxid>: 第二步:然后将自己的投票以<sid,zxid>形式发送给其他服务器,这样每个服务器除了自己的投票,还有集群中除了自 ...

  8. WPF 浏览PDF 文件

    添加成功后会在工具箱里看到下图所示的控件.打开VS2010,新建项目(WpfPDFReader),右键项目添加User Control(用户控件).因为Adobe PDF Reader COM 组件是 ...

  9. Asp.net MVC 集成AD域认证

    1.首先WebApi 应用下Web.config要配置域认证服务器节点,如下 <!--LDAP地址 用于项目AD系统账号密码验证--> <!--0:关闭域认证:1:开启域认证--&g ...

  10. 手机端apk文件安装

    1.电脑端下载豌豆荚 2.手机连接电脑,打开手机USB调试模式(设置->开发人员选项,打开开发人员选项和USB调试) 3.在电脑中双击下载好的apk文件,即可打开豌豆角,然后便可安装到手机.