js监听窗口变化动态改变div大小

js监听窗口变化动态改变div大小

  function getHeight(val) {
      this.processHeight=(window.innerHeight || 	document.documentElement.clientHeigh)-210 +'px';
    }
    getHeight(1);

	//通过注册resize监听器,实现对窗口大小的监听
    window.addEventListener('resize', e => { this.getHeight(1); }, false);
    //溢出resize监听器
    //window.removeEventListener('resize', e => { this.getHeight(1); });

获取DOM元素的宽高

javascript中获取dom元素高度和宽度的方法如下:

网页可见区域宽: document.body.clientWidth

网页可见区域高: document.body.clientHeight

网页可见区域宽: document.body.offsetWidth (包括边线的宽)

网页可见区域高: document.body.offsetHeight (包括边线的高)

网页正文全文宽: document.body.scrollWidth

网页正文全文高: document.body.scrollHeight

网页被卷去的高: document.body.scrollTop

网页被卷去的左: document.body.scrollLeft

对应的dom元素的宽高有以下几个常用的:

元素的实际高度:document.getElementById("div").offsetHeight

元素的实际宽度:document.getElementById("div").offsetWidth

元素的实际距离左边界的距离:document.getElementById("div").offsetLeft

元素的实际距离上边界的距离:document.getElementById("div").offsetTop

猜你喜欢

转载自blog.csdn.net/AndCo/article/details/84581360