Javascript之JS盒子模型常用的属性、定时器、获取浏览器计算后的属性样式值

2019独角兽企业重金招聘Python工程师标准>>>

JS盒子模型：通过JS中提供一系列的属性和方法，获取页面中元素的样式信息值

//#bax(有很多自己的私有属性) -> HTMLDivElement.peototype -> HTMLElement.prototype -> Element.prototype

var box = document.getElementById('div')

console.dir(box)

//内容的宽度和高度：我们设置的width/height这两个样式就是内容的宽和高，如果没有设置高度，容器中的高度会根据里面的内容自己适应，这样获取的值就是真实内容的高，如果设置股东的高度，其内容高度不会改变

//真实内容的高度和宽度：这个代指的实际内容的狂傲(和我们设置的米有必然的关系)，如果有溢出，那么真实内容的高度是要把溢出来的高度也要加进去

// 1、client系列(当前元素的私有属性)

    clientHeight和clientWidth：内容的高度/宽度+padding值，和内容溢出没有关系

    clientLeft：左边框的宽度，clientTop：上边框的高度

//2、offset系列

    offsetWidth/offsetHeight：clientWidth/clientHeight+左右/上下边框（和内容溢出是没有任何的关系）

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

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

//3、scroll系列

    scrollWidth/scrollHeight：和我们的clientWidth/clientHeight一样(前提是容器中的内容美誉溢出的情况下)，如果容器中的内容有溢出，我们获取的结果是如下规则

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

    scrollHeight：真实内容的高度(k=包括溢出)+上填充

    // ->获取到的结果都是约等于的值，因为：同一个浏览器，我们是否设置overflow：hidden对最终的结果是有影响的；在不同的浏览器中我们获取到的结果也是不一样的；

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

 

//4、使用window.getComputedStyle(当前要操作的元素对象, 当前元素的伪类/null)这个方法获取所有经过浏览器计算过的样式

    //获取到的结果是CSSStyleDeclaration这个类得一个实例：包含了当前元素的所有样式属性值

    所有经过浏览器计算过的样式：只要当前的元素标签可以在页面中呈现出来，那么它的所有的样式都是经过浏览器计算过的(渲染过的)，哪怕某些样式没有写，也是可以获取到的

    //-> console.log(window.getComputedStyle(box,null))

    //方法虽然好用，但是在IE6~8下是不兼容的，因为window下没有getComputedStyle这个属性

    //在IE6~8下我们可以使用currentStyle方法来获取所有经过浏览器计算过的样式值

    getCss(curEle, attr){

        if('getComputedStyle' in window){

            window.getComputedStyle(curEle, null).attr

        }else{

            curEle.currentStyle.attr

        }

    }

    //通过检测浏览器版本来检测兼容性

    //-> window.navigator.userAgent    检测浏览器版本

第一次升级：把获取到的样式值"单位去掉"

getCss(curEle, attr){

        var val = null, reg = null;

        if('getComputedStyle' in window){

            val = window.getComputedStyle(curEle, null).attr

        }else{

            //如果获取传递进来的结果是opacity，说明我想获取的是透明度属性值，但是在IE6~8下是获取透明度是需要使用filter的

            if(attr==='opacity'){

                val = curEle.currentStyle.filter  // ->'alpha(opacity=10)' 把获取到的结果进行剖析，获取里面的数字，然后除以100，才和其他浏览器保持一致

                reg=/^plpha\(opacity=(\d+(?:\.\d+)?\)$/i;

                xal = reg.test(val)?reg.exec(val)[1]/100:1

            }else{

                val = curEle.currentStyle.attr

            }

        }

        reg = /^(-?\d+(\.\d+)?)(px|pt|rem|em)?$/i;

        return reg.test(val)?parseFloat(val) : val 

    }

JS盒子模型中：client系列/offset系列/scrollWidth/scrollHeight都是"只读"属性->只能通过属性获取值，不能通过属性修改值

scrollTop/scrollLeft：滚动条卷去的高度/宽度(这两个是唯一"可读写属性")

直接设置scrollTop=0;回到容器顶部

注意：scrollTop的值是存在边界值(最大值和最小值)，我们要是设置的比最大值大或者比最小值小都没用，起到效果的依然是边界值，比如：scrollTop=-1000;  ->  其效果仍然是回到容器顶部，用scrollTop属性获取仍然是0；即最小值是0，最大值=scrollHeight - clientHeight

 

定时器：setTimeout/setInterval

    setTimeout：等到设置的时间后，开始执行定时器中的方法，方法执行完成后，定时器结束

    setInterval：等到设置的时间后，开始执行定时器中的方法，方法执行完成后，定时器并没有结束，会以每隔设定的时间执行一次，直到手动清除定时器为止

    注意：定时器是有返回值的，返回的结果是一个数字，数字是几就代表第几个定时器，定时器的顺序是不分setTimeouti和setInterval，

    清除定时器：clearTimeout(数字)/clearInterval(数字)：代表把数字代表的那个第N个定时器清除掉

    注意：clearTimeout(数字)/clearInterval(数字)设置的不管是setTimeout/setInterval定时器，这两个清除器都可以使用，都能清除掉定时器。

    滚动条滚动事件：window.onscroll = function(){}    //-> 只要滚动条滚动，就会触发此事件

    document.documentElement.srcollTop||document.body.scrollTop来获取此时滚动条滚动的高度

    document.documentElement.clientHeight||document.body.clientHeight来获取此时一屏的高度

    

转载于:https://my.oschina.net/u/3419199/blog/1480232