星空网 > 软件开发 > Java

document.body / document.ducumentElement /等获取高度和宽度的区别

document.body / document.ducumentElement /等获取高度和宽度的区别

<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <title></title>  <style>    /**{ padding: 0; margin: 0;}*/    body{ height: 1500px; border:3px solid #fbcb09; padding: 5px;}    .oBox{ width: 1000px; height: 1000px;}    #div1{ position: fixed;bottom: 0; border: 1px solid #ffe87c; }  </style>  <script>    window.onload = function(){      var a = getInfo();      var arr = a.split(" ");      var oDiv= document.getElementById('div1');      var oUl = oDiv.getElementsByTagName('ul')[0];      for(var i =0; i < arr.length;i++){        var oLi = document.createElement('li');        oLi.innerHTML = arr[i];        oUl.appendChild(oLi);      }    }    function getInfo(){      str = "";      str += "网页可见区域宽度:" + document.documentElement.clientWidth +"px,(包括padding、border、margin) ";      str += "网页可见区域高度:" + document.documentElement.clientHeight +"px,(包括padding、border、margin) ";      str += "网页body宽度:" + document.body.clientWidth +"px,(只包括padding) ";      str += "网页body高度:" + document.body.clientHeight +"px,(只包括padding) ";      str += "网页body区域宽度:" + document.body.offsetWidth +"px,(只包括padding,border) ";      str += "网页body区域高度:" + document.body.offsetHeight +"px,(只包括padding,border) ";      str += "网页滚动上去的高度(chrome+ie+opera):" + document.body.scrollTop +"px ";      str += "网页滚动上去的高度(ff):" + document.documentElement.scrollTop +"px ";      str += "网页滚动到左侧的宽度(chrome+ie+opera):" + document.body.scrollLeft +"px ";      str += "网页滚动到左侧的宽度(ff):" + document.documentElement.scrollLeft +"px ";      str += "网页内容宽度:" + document.body.scrollWidth +"px,(只包括padding,border) ";      str += "网页内容高度:" + document.body.scrollHeight +"px,(只包括padding,border) ";      str += "网页正文顶部位置:" + window.screenTop +"px(窗口距屏幕顶部的高度,非全屏时改变) ";      str += "网页正文左侧位置:" + window.screenLeft +"px(窗口距屏幕左侧的宽度,非全屏时改变) ";      str += "屏幕分辨率的宽:" + window.screen.width +"px ";      str += "屏幕分辨率的高:" + window.screen.height +"px ";      str += "屏幕可用工作区宽度:" + window.screen.availWidth +"px ";      str += "屏幕可用工作区高度:" + window.screen.availHeight + "(屏幕分辨率高度减去了任务栏高度) " ;      str += "屏幕设置的色彩:" + window.screen.colorDepth + "位彩色" +" ";      str += "屏幕设置是:" + window.screen.deviceXDPI + "像素/英寸";      return str;    }  </script></head><body><div class="oBox"></div><div class="oBox"></div><div id="div1">  <ul></ul></div></body></html>

 




原标题:document.body / document.ducumentElement /等获取高度和宽度的区别

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

tiktok培训 班:https://www.goluckyvip.com/tag/84014.html
tiktok线下课程:https://www.goluckyvip.com/tag/84015.html
海外tiktok培训:https://www.goluckyvip.com/tag/84016.html
tiktok培训学习:https://www.goluckyvip.com/tag/84017.html
tiktok培训教程:https://www.goluckyvip.com/tag/84018.html
tiktok教程培训:https://www.goluckyvip.com/tag/84019.html
怎样做出一个有利可图的SaaS产品?:https://www.kjdsnews.com/a/1836639.html
【再放信号】美国Etsy即将放开中国卖家入驻,官方邮件你收到了吗?:https://www.kjdsnews.com/a/1836640.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流