js、dom、html、css常见问题FAQ

获取元素dom的距离窗口的坐标距离/xy

XXX.getBoundingClientRect()    top left right bottom

dom节点克隆

node.cloneNode(deep)
可选。默认是 false。

设置为 true，如果您需要克隆节点及其属性，以及后代

设置为 false，如果您只需要克隆节点及其后代

父A   flex模式，子B设置flex-grow:1,B的子C设置height:100%或许width:100%无效

思考：可能存在问题所在：flex的宽高 与 height、width不在一个系统里，子B的flex-grow:1出来的宽高，子C的height:100%不能识别。

解决办法：

子B以及父C往上都需要设置100%.，直到某dom设置具体高宽。同时B设置flex-grow

怎么让宽高相等

padding的值是相对于宽width的值进行百分比计算，所以padding:100%等于宽width：100%

所以下方div.img的宽高相等

.img{
        position: relative;
        width: 100%;
        padding-top: 100%;----->padding的值是相对于宽的值进行百分比计算
        img{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;------->根据父的宽计算
            height: 100%;------>根据父的高计算
        }
    }

 

terget和currentTarget区别

一般情况下target和currentTarget是一致的，我们只要使用terget即可；

但有一种情况必须区分这三者的关系，那就是在父子嵌套的关系中，父元素绑定了事件，单击了子元素（根据事件流，在不阻止事件流的前提下他会传递至父元素，导致父元素的事件处理函数执行），这时候currentTarget指向的是父元素，因为他是绑定事件的对象，而target指向了子元素，因为他是触发事件的那个具体对象