三大家族 与触摸事件

_喆
206 阅读3分钟

1.offset 用于获取元素自身的位置和大小！！！

位置
offsetTop 距离最近一个定位的父元素头部的距离， 如果说没有定位的父元素，则body
offsetLeft 距离最近一个定位的父元素左边的距离， 如果说没有定位的父元素，则body
求自身大小
offsetWidth = padding + border + width
offsetHeight = padding + border+Height
offsetParent  返回带有定位的父亲 ，一层一层的找，若都没有则 返回body。

        // offset 用于获取元素自身的位置和大小！！！
        //offsetTop 距离最近一个定位的父元素头部的距离， 如果说没有定位的父元素，则body
        //offsetLeft 距离最近一个定位的父元素左边的距离， 如果说没有定位的父元素，则body
        var father = document.queryCommandEnabled('.father');
        var son = document.querySelector('.son');

        console.log(son.offsetTop)
        console.log(son.offsetLeft)
        //求自身大小
        console.log(son.offsetWidth)//offsetWidth = padding + border + width
        console.log(son.offsetHeight)//offsetHeight = padding + border+Height
        //offsetParent  返回带有定位的父亲 ，一层一层的找，若都没有则 返回body。

        console.log(son.offsetParent)

2.offset与style的区别

offsetWidth  数字 为padding + border + width  不可以赋值
elem.style.Width 为字符串 可以赋值 
只有用elem.style.Width 赋值了 才能调用，只在 css设置 width elem.style.width调用不了

3.client家族

clientTop 上边框的宽度
clientLeft 左边框的宽度
clientWidth 不带边框的宽度！！！padding + width
clientHeight 不带边框的高度

        var son = document.querySelector('.son');

        console.log(son.clientTop)//上边框的宽度
        console.log(son.clientLeft)//左边框的宽度

        console.log(son.clientWidth)//240 不带边框的宽度！！！padding + width
        console.log(son.clientHeight)//240

4.scroll滚动

scroll事件类型 滚动！！！ 事件 连续触发事件！！！
div.addEventListener('scroll',function(){}）

scrollHeight滚动高度 scrollWidth 滚动宽度

scrollTop 卷到里面的高度 

        // scroll 滚动！！！ 事件
        var div = document.querySelector("div")
        //scrollHeight滚动高度 scrollWidth 滚动宽度
        console.log(div.scrollHeight)
        //scroll 滚动！！！ 事件 连续触发事件！！！
        div.addEventListener('scroll',function(){
            console.log('这是滚动事件')
            console.log(div.scrollTop)//卷到里面的高度
        });

5. window.pageYOffset 获取窗口卷进去的距离！！！

6.今天上午所学知识简述总结

offset家族的属性
offsetTop  距离  定位的父亲的头部距离 没有按body来计算
offsetLesf
offsetWidth  元素的：padding + border + width
offsetHeight

client家族的属性
clientTop 元素上边框
clientLeft
clientWidth  padding  + width     除去边框
clientHeight

scroll家族 滚动
1.scroll类型
div.addEventListener('scroll',function(){}） 连续触发
2.scroll属性
scrollWidth 滚动宽度
scrollHeight
scrollTop  文本卷到元素里面的高度

零碎知识点
1.offset与style的不同
offsetWidth  为数字 为padding + border + width  不可以赋值
elem.style.Width 为字符串 可以赋值 style.width=width;
只有用elem.style.Width 赋值了 才能调用，只在 css设置 width elem.style.width调用不
2. css   ：  calc() 函数用于动态计算长度值。
需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
calc()函数支持 "+", "-", "*", "/" 运算；
3.overflow: auto; 超出为滚动条
4.获取窗口卷进去的距离！！！ window.pageYOffset window.pageXOffset
5. 调用函数 是有参数 就加括号 没参数就不加括号 函数的调用是看作用域的

7.做题时遇到的问题与重新掌握的知识

7.1在做放大镜案例的时候

1.想要大图片跟随蒙层的位置移动 有两种解决方法？？
一种是创建div2 把div2的背景设为大图片 背景移动
第二种是将大图片放到div2内 超出隐藏 给大图片设置定个位 来移动
2.大图片的移动位置 = 蒙层的移动位置 * 大图片的最大移动/蒙层的最大移动位置
3.让蒙层随着鼠标的移动而移动 我所犯下的错误！！！
计算蒙层到div1的距离 步骤
1.应该先计算div1距离到body的距离 div1.offsetTop div1.offsetLeft
2.计算鼠标到div1top的距离  X=e.pageX - div1.offsetTop
3. 计算蒙层到div1的距离 = X-mc.offsetWidth

8.触摸事件

//touch 移动端事件
//touchstart 移动端触摸事件
//touchmove 移动端移动事件 这是个连续触发的事件
//touchend 移动端离开事件
//e.targetTouches[0].pageX 手指点击的x轴坐标

9.windows.scroll(X,Y)

window.scroll(X,Y) 可设置X Y改变 滚动卷入窗口的大小
avatar
文章
阅读
粉丝