js-day12

DOM尺寸

下面的方式都是基于内联样式表的

• 只能获取到内联style属性的CSS样式中的宽和高，如果有，获取;如果没有，则返回空。不仅仅可以设置还可以获取

box.style.width
box.style.height
box.style.fontSize
box.style.backgroundColor
box.style.backgroundSize

var box1 = document.querySelector('.box1')
console.log(parseInt(box1.style.width))
console.log(box1.style.height)

• 返回了元素大小，但没有单位，默认单位是px，如果设置了其他的单位，比如100em之类，返回出来的结果还会转换为px像素（不含边框） width + padding值box.clientWidth、 box.clientHeight

 var box2 = document.querySelector('.box2')
console.log(box2.clientWidth)
console.log(box2.clientHeight)
console.log(box2.clientLeft)
console.log(box2.clientTop)

• 获取滚动内容的元素大小（当元素出现滚动条时，此属性指全部滚动内容的宽高）返回了元素大小，默认单位是px。如果没有设置任何CSS的宽和高度，它会得到计算后的宽度和高度 整个内容的 box.scrollHeight、box.scrollWidth

 var box3 = document.querySelector('.box3')
console.log(box3.scrollWidth)
console.log(box3.scrollHeight)
console.log(box3.clientHeight)

• box.offsetWidth、box.offsetHeight返回了元素大小，默认单位是px。如果没有设置任何CSS的宽和高度，他会得到计算后的宽度和高度

包含盒模型中除margin以外的宽高（包含边框）最稳定，使用最频繁

 var box4 = document.querySelector('.box4')
console.log(box4.offsetWidth)
console.log(box4.offsetHeight)

DOM位置

• box.offsetLeft，需要定位参照，获取距离父元素左边的距离

• box.offsetTop，需要定位参照，获取距离父元素上边的距离

• offsetParent 获取父元素，必须要有定位流

• getBoundingClientRect 获取元素的尺寸和位置的，返回的是一个对象形式

*{
    margin: 0;
    padding: 0;
}
.father{
    width: 300px;
    height: 300px;
    background-color: orange;
    margin: 30px;
    /* position: relative; */
}
.son{
    width: 200px;
    height: 200px;
    background-color: hotpink;
    position: absolute;
    left: 50px;
    top: 30px;
}

    <div class="father">
       <div class="son"></div>
   </div>
   <script>
       // box.offsetLeft，需要定位参照，获取距离父元素左边的距离  

       // box.offsetTop，需要定位参照，获取距离父元素上边的距离  

       // offsetParent 获取父元素，必须要有定位流

       var son = document.querySelector('.son')
       // console.log(son.offsetLeft)
       // console.log(son.offsetTop)

       console.log(son.offsetParent)
       console.log(son.parentElement)
       console.log(son.parentNode)

       // getBoundingClientRect 获取元素的尺寸和位置的，返回的是一个对象形式
       console.log(son.parentNode.getBoundingClientRect().width)
       console.log(son.parentNode.getBoundingClientRect().height)
       console.log(son.parentNode.getBoundingClientRect().top)
       console.log(son.parentNode.getBoundingClientRect().left)

   </script>

获取样式

• getComputedStyle().attr 获取元素的各种样式，不限定你只能获取尺寸或者位置
  • 参数1表示要获取样式的元素
  • 参数2表示的是一个伪对象（可以省略不写，或者使用null进行占位）
  • attr表示的是样式
• 在低版本的IE浏览器里面无法使用的 ele.currentStyle.attr

 var box = document.querySelector('.box')
   console.log(getComputedStyle(box).width)
   console.log(getComputedStyle(box).paddingLeft)
   console.log(getComputedStyle(box).backgroundColor)
   console.log(getComputedStyle(box).fontSize)
   console.log(getComputedStyle(box, ':after').width)

   function getStyle(ele, attr){
       return getComputedStyle(ele)[attr]
   }
   console.log(getStyle(box, 'width'))
   console.log(getStyle(box, 'height'))

this对象

this是函数执行上下文对象，这个对象指向谁是固定不变的，需要根据函数的调用方式来决定

在全局执行上下文环境下打印this，this指向的是window对象console.log(this) // window

函数调用圆括号时，函数的this是window对象。严格模式下无法指向全局对象window的，是undefined

  'use strict'
 function fn(){
     console.log(this) // window
 }
 fn()

函数作为一个对象的方法，对象打点调用，函数的this就是这个对象

var obj = {
   say(){
       console.log(this)
   }
}
obj.say()

函数是事件处理函数时，函数的this就是触发这个this的对象

document.querySelector('button').onclick = function(){
   console.log(this)
}

定时器调用函数时，this是window对象

setInterval(function(){
   console.log(this) // window
}, 1000)

数组中存放的函数，被数组索引之后加圆括号调用，this就是这个数组

function fn(){
console.log(this)
}
var arr = ['a', 'b', fn]
console.log(arr[arr.length-1])
arr[arr.length-1]() // ['a', 'b', ƒ]

this 备份

可以在能找到this的地方把this先进行保存，再去使用

var box = document.querySelector('div')
// 需求：当点击了这个div 2s后改变背景颜色
box.onclick = function(){
   // this备份：就是在能找到this的地方把这个this进行存储
   // console.log(this)
   // var _this = this
   var that = this
   setTimeout(function(){
       that.style.backgroundColor = 'hotpink'
       // console.log(this) // window
   }, 2000)
}