[真传弟子]动画师-赖骏锋|2018年05月10日的日报-技能树.IT修真院

发表于： 2018-05-10 21:07:19

1 637

今天完成的事情：今天看了一下js的宽高，在慕课网了解一下，、clientWidth / clintHeightclientWidth = 元素的宽度 + 元素的paddingLeft + 元素的paddingRightclientHeight = 元素的高度 + 元素的paddingTop + 元素的paddingBottom注意：如果该元素上存在上下滑动滚动条，则clientWidth的值不包括滚动条所占的宽度（即获得的clientWidth已经减去了滚动条的宽度）注意：如果该元素上存在左右滑动滚动条，则clientHeight的值不包括滚动条所占的宽度（即获得的clientHeight已经减去了滚动条的高度）2、clientTop / clientLeftclientTop - 可视区域的上边距距离自身上边框的外边框的距离（即为上边框的宽度）clientLeft - 可视区域的左边距距离自身左边框的外边框的距离（即为左边框的宽度）没有滑动条的效果代码如下：[html] view plain copy<!DOCTYPE html><html><head><meta charset="UTF-8"><title>获取元素的高度和宽度</title><style type="text/css">#wrap{height: 500px;width: 500px;background-color: skyblue;margin: 0 auto;border: 3px solid red;overflow: scroll;}#content{height: 200px;width: 200px;background-color: greenyellow;margin: 0 auto;border: 0px solid yellow;border-width: 5px 6px 8px 12px;padding: 5px 4px 6px 12px;margin-top: 50px;}</style></head><body><div id="wrap"><div id="content"></div></div></body><script type="text/javascript">//获取content对象var contentObj = document.getElementById("content");console.log(contentObj.clientHeight);console.log(contentObj.clientWidth);</script></html> 以上结果输出的即为id为content的div的clientHeight 和 clientWidth 分别为 211 = height(200) + paddingTop(5) + paddingBottom(6)有滚动条的代码如下,在content div的里面添加一个id为one的div让新添加的div超出隐藏即可出现滚动条[html] view plain copy<!DOCTYPE html><html><head><meta charset="UTF-8"><title>获取元素的高度和宽度</title><style type="text/css">#wrap{height: 500px;width: 500px;background-color: skyblue;margin: 0 auto;border: 3px solid red;overflow: scroll;padding: 5px;}#content{height: 200px;width: 200px;background-color: greenyellow;margin: 0 auto;border: 0px solid yellow;border-width: 5px 6px 8px 12px;padding: 5px 4px 6px 12px;margin-top: 50px;overflow: scroll;}#one{height: 300px;width: 300px;}</style></head><body><div id="wrap"><div id="content"><div id="one"></div></div></div></body><script type="text/javascript">//获取content对象var contentObj = document.getElementById("content");console.log(contentObj.clientHeight);console.log(contentObj.clientWidth);console.log(contentObj.clientTop);console.log(contentObj.clientLeft);</script></html> 最后输出的结果为clientHeight 和 clientWidth分别为 196 = height(200) + paddingTop(5) + paddingBottom(6) - 滚动条的宽度(15)201 = width(200) + paddingLeft(12) + paddingRight(4) - 滚动条的宽度(15)3、offsetHeight / offsetWidthoffsetHeight / offsetWidth实际上获取的内容和clientHeight / clientWidth的差别在于，offsetHeight和offsetWidth 不仅包括元素的高度和宽度和padding的值，而且包括border的宽度注意：offsetHeight / offsetWidth包括滚动条的宽度（这一点与clientHeight / clientWidth）不同[html] view plain copy<!DOCTYPE html><html><head><meta charset="UTF-8"><title>获取元素的高度和宽度</title><style type="text/css">#wrap{height: 500px;width: 500px;background-color: skyblue;margin: 0 auto;border: 3px solid red;overflow: scroll;padding: 5px;}#content{height: 200px;width: 200px;background-color: greenyellow;margin: 0 auto;border: 0px solid yellow;border-width: 5px 6px 8px 12px;padding: 5px 4px 6px 12px;margin-top: 50px;overflow: scroll;}#one{height: 300px;width: 300px;}</style></head><body><div id="wrap"><div id="content"><div id="one"></div></div></div></body><script type="text/javascript">//获取content对象var contentObj = document.getElementById("content");console.log(contentObj.offsetHeight);console.log(contentObj.offsetWidth);console.log(contentObj.offsetLeft);console.log(contentObj.offsetTop);</script></html> 输出的结果：offsetHeight = height(200) + paddingTop(5) + paddingBottom(6) + borderTop(5) + borderBottom(8)offsetWidth = width(200) + paddingLeft(12) + paddingRight(4) + borderLeft(12) + borderRight(6)4、offsetTop / offsetLeftoffsetTop - 该元素的上边框的外边缘距离父级元素上边框的内边缘的距离offsetLeft - 该元素的左边框的外边缘距离父级元素左边框的内边缘的距离5、scrollHeight / scrollWidthscrollHeight = 子级超出父级的元素的高度 + 父级的上下padding值scrollWidth = 子级超出父级的元素的宽度 + 父级的左padding 6、scrollTopscrollTop 元素滚动的距离

↑↑↑太复杂了不知道从哪cut，就全复制了emmmm

明天计划的事情：继续写代码实践
遇到的问题：今天看了一个问题。讲一下：

常遇到的关于浏览器的宽高问题：

//以下均可console.log()实验
  var winW=document.body.clientWidth||document.docuemntElement.clientWidth;//网页可见区域宽
  var winH=document.body.clientHeight||document.docuemntElement.clientHeight;//网页可见区域宽
  //以上为不包括边框的宽高，如果是offsetWidth或者offsetHeight的话包括边框
   
  var winWW=document.body.scrollWidth||document.docuemntElement.scrollWidth;//整个网页的宽
  var winHH=document.body.scrollHeight||document.docuemntElement.scrollHeight;//整个网页的高
 
  var scrollHeight=document.body.scrollTop||document.docuemntElement.scrollTop;//网页被卷去的高
  var scrollLeft=document.body.scrollLeft||document.docuemntElement.scrollLeft;//网页左卷的距离
 
  var screenH=window.screen.height;//屏幕分辨率的高
  var screenW=window.screen.width;//屏幕分辨率的宽
  var screenX=window.screenLeft;//浏览器窗口相对于屏幕的x坐标（除了FireFox）
  var screenXX=window.screenX;//FireFox相对于屏幕的X坐标
  var screenY=window.screenTop;//浏览器窗口相对于屏幕的y坐标（除了FireFox）
  var screenYY=window.screenY;//FireFox相对于屏幕的y坐标

收获：

1. window.location和document.location

window对象的location属性引用的是location对象，表示该窗口中当前显示文档的URL
document的对象的location属性也是引用location对象
所以 window.location === document.location //true

2. window.screen

window.screen包含有关用户屏幕的信息。它包括：
- window.screen.width
- window.screen.height
- window.screen.availHeight
- window.screen.availWidth
- window.screenTop
- window.screenLeft

3. 与window相关的宽高