h5几种宽高的获取

最新推荐文章于 2021-11-10 16:18:09 发布

原创最新推荐文章于 2021-11-10 16:18:09 发布 · 2.9k 阅读

1 ·

CC 4.0 BY-SA版权

h5学习专栏收录该内容

5 篇文章

订阅专栏

本文介绍了在H5开发中如何兼容各种设备，获取页面的宽度和高度，主要使用了document.documentElement.clientWidth和document.documentElement.clientHeight两个属性。

获取元素宽高数值的API

                clientWidth  clientHeight		width + padding
                offsetWidth  offsetHeight		width + padding + border
                scrollWidth  scrollHeight		盒子总共占的高  绝对高

            获取当前浏览器窗口宽高的方式

                非IE 6 7 8 (BOM)
                window.innerWidth
                window.innerHeight

兼容所有，所以我们一般使用这个 document.documentElement.clientWidth document.documentElement.clientHeight

offsetParent  定位父级

            offsetLeft   元素左边 距离 定位父级左边 的数值
            offsetTop    元素顶部 距离 定位父级顶部 的数值

 //浏览器尺寸改变的事件(BOM)
            window.onresize = getSize();

event事件对象底下
                clientX    IE      获取鼠标到浏览器可视窗口的距离
                clientY
                pageX      非IE浏览器   获取的是鼠标到浏览器顶端的距离
                pageY      IE9+
                兼容处理
				pageX = clientX + document.body.scrollLeft
				pageY = clientY + document.body.scrollTop

         滚动条
                document.body.scrollTop/left  非ie
                document.documentElement.scrollTop/left ie

	兼容
	var cleft = document.body.scrollLeft || document.documentElement.scrollLeft;

            冒泡问题
			阻止子元素的事件向父元素冒泡
                无兼容问题
                    不符合w3c规范 推荐
                        event.cancelBubble = true;
                    符合w3c规范的
                        event.stopPropagation()

        box3.onclick = function(ev){
            // ev.cancelBubble = true;
            //ev.stopPropagation();
            alert("box3")
        }

            onmouseover
            onmouseout

            onmouseenter  不冒泡
            onmouseleave