设为首页收藏本站

IT技术擎 - 最棒的IT web技术交流社区

 找回密码
 注册为IT技术擎人

QQ登录

只需一步,快速开始

搜索
热搜: php h5 jquery
查看: 26|回复: 0

[javascript] js学习总结----盒子模型

[复制链接]
发表于 2018-1-5 16:15:37 | 显示全部楼层 |阅读模式

一、JS盒子模型
 一提到盒子模型,大家首先会想到的是css的盒子模型,那么JS盒子模型指的是通过JS中提供的一系列的属性和方法,获取页面中的元素的样式信息值。
  对于一个#div(有很多自己的私有的属性) - > HTMLDivElement.prototype- >HTMLElement.prototype- >Element.prototype- >Node.prototype- >EventTarget.prototype- >Object.prototype
  下面是一些JS方法
  1、client系列(当前元素的几个私有的属性)

  内容的宽度和高度:我们设置的width/height这两个样式就是内容的宽和高,如果没有设置height值,容器的高度会根据里面的内容自己进行适应,这样获取的值就是真实内容的高;如果设置固定了高度了,不管内容是多了还是少了,其实我们内容的高度指的都是设定的那个值。
  真实内容的宽度和高度:这个代指的是实际内容的宽高(和我们设置的height没有必然的联系),例如我设置高度为200px,如果内容有溢出,那么真实内容的高度就是要把溢出的内容高度加进来的
  clientWidth/clientHeight 内容的宽度/高度 + 左右/上下 填充(和内容溢出没有关系)
  clientLeft:左边框的宽度 clientTop:上边框的高度 (border[Left/Top]Width)
  2、offset系列
  offsetWidth/offsetHeight:clientWidth/clientHeight+左右/上下边框(和内容是否溢出也是没有任何的关系的)


  offsetParent:当前元素的父级参照物


  offsetLeft/offsetTop:当前元素的外边框距离父级参照物的内边框的偏移量

  3、scroll系列
  scrollWidth/scrollHeight:和我们的clientWidth/clientHeight一模一样(前提是:容器中的内容没有溢出的情况下) 如果容器中的内容有溢出,我们获取的结果如下规则


  scrollWidth:真实内容的宽度(包含溢出)+左填充


  scrollHeigh:真实内容的高度(包含溢出)+上填充


  获取到的结果都是约等于的值,因为:同一个浏览器,我们是否设置overflow="hidden”对于最终的结果是有影响的;在不同的浏览器下取到的结果也是不同的。


  scrollLeft/scrollTop:滚动条卷去的宽度和高度


  


二、关于JS盒子模型属性取值的问题


  我们通过这13个属性值获取到的结果永远不可能出现小数,都是整数,浏览器在获取结果的时候,还在原来真是结果的基础上进行四舍五入;


三、关于操作浏览器本身的盒子模型信息


  clientWidth/clientHeight 是当前浏览器可视窗口的宽度和高度(一屏幕的宽度和高度)


  scrollWidth/scrollHeight 是当前页面的真实的宽度和高度(所有屏加起来的宽度和高度~但是是一个约等于的值)


  我们不管哪些属性,也不管是什么浏览器,也不管是获取还是设置,想要都兼容的话,需要写两套


  document.documentElement[attr] || document.body[attr];


  必须document.documentElement在前


  例如document.documentElement.clientWidth || document.body.clientWidth


  设置也需要写两套


  编写一个有关于操作浏览器盒子模型的方法 ,代码如下

 
  1. //如果只传递了attr没有传递value,默认的意思是获取样式值。如果都传递了,意思是设置 //不严谨的来说这就是有关于"类的重载”:同一个方法,通过传递的参数的不同实现了不同的功能 functionwin(attr,value){if(typeofvalue === "undefined"){//属于获取操作 returndocument.documentElement[attr] ||document.body[attr]; }//设置 document.documentElement[attr] =value; document.body[attr] =value }
复制代码
  



上一篇:solaris配置ip地址方法步骤
下一篇:Zookeeper安装
该用户未在地球留下任何的痕迹

本版积分规则

QQ|小黑屋|帮助|IT技术擎 ( 沪ICP备15054863号  

GMT+8, 2018-1-21 07:01

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表