搜索
您的当前位置:首页正文

准确获得页面、窗口高度及宽度的JS_javascript技巧

2023-12-01 来源:字库网

function getPageSize(){ var xScroll, yScroll; if (window.innerHeight && window.scrollMaxY) { xScroll = document.body.scrollWidth; yScroll = window.innerHeight + window.scrollMaxY; } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac xScroll = document.body.scrollWidth; yScroll = document.body.scrollHeight; } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari xScroll = document.body.offsetWidth; yScroll = document.body.offsetHeight; } var windowWidth, windowHeight; if (self.innerHeight) { // all except Explorer windowWidth = self.innerWidth; windowHeight = self.innerHeight; } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode windowWidth = document.documentElement.clientWidth; windowHeight = document.documentElement.clientHeight; } else if (document.body) { // other Explorers windowWidth = document.body.clientWidth; windowHeight = document.body.clientHeight; } // for small pages with total height less then height of the viewport if(yScroll < windowHeight){ pageHeight = windowHeight; } else { pageHeight = yScroll; } // for small pages with total width less then width of the viewport if(xScroll < windowWidth){ pageWidth = windowWidth; } else { pageWidth = xScroll; } arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) return arrayPageSize; } 有幸找到了你的这个东东,帮我解决了问题,不过仔细看了下,好象大大的有点问题,参数值和名称上看好象有点对不上号哦. // for small pages with total height less then height of the viewport if(yScroll < windowHeight){ pageHeight = yScroll; } else { pageHeight = windowHeight; } // for small pages with total width less then width of the viewport if(xScroll < windowWidth){ pageWidth = xScroll; } else { pageWidth = windowWidth; }

小编还为您整理了以下内容,可能对您也有帮助:

JS和jquery获取各种屏幕的宽度和高度

  Javascript:

  网页可见区域宽 document body clientWidth

  网页可见区域高 document body clientHeight

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

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

  网页正文全文宽 document body scrollWidth

  网页正文全文高 document body scrollHeight

  网页被卷去的高 document body scrollTop

  网页被卷去的左 document body scrollLeft

  网页正文部分上 window screenTop

  网页正文部分左 window screenLeft

  屏幕分辨率的高 window screen height

  屏幕分辨率的宽 window screen width

  屏幕可用工作区高度 window screen availHeight

  屏幕可用工作区宽度 window screen availWidth

  JQuery:

  $(document) ready(function(){

  alert($(window) height()); //浏览器当前窗口可视区域高度

  alert($(document) height()); //浏览器当前窗口文档的高度

  alert($(document body) height());//浏览器当前窗口文档body的高度

  alert($(document body) outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin

  alert($(window) width()); //浏览器当前窗口可视区域宽度

  alert($(document) width());//浏览器当前窗口文档对象宽度

  alert($(document body) width());//浏览器当前窗口文档body的宽度

  alert($(document body) outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin

lishixin/Article/program/Java/JSP/201311/20160

js怎么判断高度js怎么判断高度和宽度

js判断div高度。

显示超出固定高度的滚动条,只需设置overflowY=

document.getelementbyid(卷轴),style.overflowY=

获取div的高度。如果得不到,可以用下面的方法。下面的方法是得到编辑后的div的高度:

/**

*obj:需要获取其属性的html对象。

*prop:要获取的obj对象的属性。

*/

函数getCurrentStyle(obj,prop){

if(obj.currentStyle){

returnobj.currentstyle[prop];

}

elseif(window.getcomputedstyle){

propprop=prop.replace(/([A-Z])/g,);

propprop=prop.tolowercase();

returndocument.defaultview.getcomputedstyle(obj,null)[prop];

}

返回null

}

vardiv=document.getelementsbytagname(div

varheight=getCurrentStyle(div,

JS防水施工上翻高度再哪个规范中有要求急求?

建筑工程施工规范防水章节章节中有要求,一般建筑施工图施工说明中也有。

js背景图片怎么设置高度?

可以使用background-sizre属性为背景图片设置高度,在js中对应使用dom.style.backgroundSize

道路施工图怎么看标高?

方法步骤:1.我们要知道相对标高的分类:装饰完工后的表面的高度,我们叫他建筑的标高。

2.

第二步我们要知道,上下表面的高度叫做结构标高,高于首层的地面的高度均为正数,低于建筑首层的为负数。

3.

第三步是标高的符号,标高的符号都是以等腰三角形表示的,用细的实线画图的,平面图室外的标高负号,一般是用黑色三角形所表示的。

4.

标高符号的尖端被注高度的位置,尖端向上或者是向下,标高的数字标注在标高的左边

js防水墙面与地面厚度?

防水墙面以整个墙面持平。地面厚度按门的高度以门底边为标准。

vue.js怎么获取p的高度?

javascriptscreen对象获取屏幕宽高如alert(screen.height)br>availHeight属性

--

窗口可以使用的屏幕高度,单位像素br>availWidth属性

--

窗口可以使用的屏幕宽度,单位像素br>colorDepth属性

--

用户浏览器表示的颜色位数,通常为32位(每像素的位数)br>pixelDepth属性

--

用户浏览器表示的颜色位数,通常为32位(每像素的位数)(IE不支持)br>height属性

--

屏幕的高度,单位像素br>width属性

--

屏幕的宽度,单位像素br>br>p设置定位,宽度高度设为屏幕一般半即可,至于居中的话可以绝对定位

js中怎么获取当前屏幕宽度?

1、js中获取当前屏幕宽度方法如下:

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

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

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

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

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

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

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

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

网页正文部分上: window.screenTop

网页正文部分左: window.screenLeft

屏幕分辨率的高: window.screen.height

屏幕分辨率的宽: window.screen.width

屏幕可用工作区高度: window.screen.availHeight

屏幕可用工作区宽度: window.screen.availWidth

2、js简介

js,是JavaScript的缩写,是一种直译式脚本语言,一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

avaScript是的源代码在发往客户端运行之前不需经过编译,而是将文本格式的字符代码发送给浏览器由浏览器解释运行。直译语言的弱点是安全性较差,而且在JavaScript中,如果一条运行不了,那么下面的语言也无法运行。

JS 获取当前浏览器宽高

JQuery获取:

console.log($(window).width()); //浏览器当前窗口可视区域宽度

console.log($(window).height()); //浏览器当前窗口可视区域高度

console.log($(document).width());//浏览器当前窗口文档对象宽度

console.log($(document).height()); //浏览器当前窗口文档的高度

console.log($(document.body).width());//浏览器当前窗口文档body的宽度

console.log($(document.body).height());//浏览器当前窗口文档body的高度

console.log($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin

console.log($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin

JS获取:

窗口可视区域宽度 : document.documentElement.clientWidth || document.body.clientWidth;

窗口可视区域高度 : document.documentElement.clientHeight || document.body.clientHeight;

窗口可视区域宽度+边线和滚动条 : document.body.offsetWidth ;

窗口可视区域高度+边线和滚动条 : document.body.offsetHeight ;

实际内容的宽度 : document.body.scrollWidth;

实际内容的高度 : document.body.scrollHeight;

滚动条下拉被卷起来的距离 :document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

滚动条侧拉被卷起来的距离 :document.body.scrollLeft || document.documentElement.scrollLeft ;

网页正文部分上 :window.screenTop;

网页正文部分左 :window.screenLeft;

元素的宽度 :obj.offsetWidth;

元素的高度 :obj.offsetHeight;

相对于父元素的上位移 :obj.offsetTop;(在元素的包含元素不含滚动条的情况下)

相对于父元素的左位移 :obj.offsetLeft;(在元素的包含元素不含滚动条的情况下)

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

上一篇:

下一篇:

热门图文

  • 笙歌处处楼的下一句 笙歌处处楼的下一句是什么

    笙歌处处楼的下一句:无妨思帝里。笙歌处处楼的下一句:无妨思帝里。诗词名称:《正月十五日夜月》。本名:白居易。别称:诗王、诗魔。字号:字乐天号香山居士,又号醉吟先生。所处时代:唐代。民族族群:汉族。出生地:河南新郑。出生时间:772年2月28日。去世时间:846年9月8日。主要作品:《直中书省》《新亭病后独坐招李侍郎公垂》《忆江南》《家园三绝》《赋得古原草送别》等。主要成就:新乐府运动主要倡导者、写下了不少反映人民疾苦的诗篇。我们为您从以下几个方面提供“笙歌处处楼”的详细介绍。一、《正月十五日夜月》的全文 点此查看《正月十五日夜月》的详细内容。岁熟人心乐,朝游复夜游。春风来海上,明月在江头。灯火家家市,笙歌处处楼。无妨思帝里,不合厌杭州。

  • 灯火家家市的下一句 灯火家家市的下一句是什么

    灯火家家市的下一句:笙歌处处楼。灯火家家市的下一句:笙歌处处楼。诗词名称:《正月十五日夜月》。本名:白居易。别称:诗王、诗魔。字号:字乐天号香山居士,又号醉吟先生。所处时代:唐代。民族族群:汉族。出生地:河南新郑。出生时间:772年2月28日。去世时间:846年9月8日。主要作品:《直中书省》《新亭病后独坐招李侍郎公垂》《忆江南》《家园三绝》《赋得古原草送别》等。主要成就:新乐府运动主要倡导者、写下了不少反映人民疾苦的诗篇。我们为您从以下几个方面提供“灯火家家市”的详细介绍。一、《正月十五日夜月》的全文 点此查看《正月十五日夜月》的详细内容。岁熟人心乐,朝游复夜游。春风来海上,明月在江头。灯火家家市,笙歌处处楼。无妨思帝里,不合厌杭州。

  • 明月在江头的下一句 明月在江头的下一句是什么

    明月在江头的下一句:灯火家家市。明月在江头的下一句:灯火家家市。诗词名称:《正月十五日夜月》。本名:白居易。别称:诗王、诗魔。字号:字乐天号香山居士,又号醉吟先生。所处时代:唐代。民族族群:汉族。出生地:河南新郑。出生时间:772年2月28日。去世时间:846年9月8日。主要作品:《直中书省》《新亭病后独坐招李侍郎公垂》《忆江南》《家园三绝》《赋得古原草送别》等。主要成就:新乐府运动主要倡导者、写下了不少反映人民疾苦的诗篇。我们为您从以下几个方面提供“明月在江头”的详细介绍。一、《正月十五日夜月》的全文 点此查看《正月十五日夜月》的详细内容。岁熟人心乐,朝游复夜游。春风来海上,明月在江头。灯火家家市,笙歌处处楼。无妨思帝里,不合厌杭州。

  • 春风来海上的下一句 春风来海上的下一句是什么

    春风来海上的下一句:明月在江头。春风来海上的下一句:明月在江头。诗词名称:《正月十五日夜月》。本名:白居易。别称:诗王、诗魔。字号:字乐天号香山居士,又号醉吟先生。所处时代:唐代。民族族群:汉族。出生地:河南新郑。出生时间:772年2月28日。去世时间:846年9月8日。主要作品:《直中书省》《新亭病后独坐招李侍郎公垂》《忆江南》《家园三绝》《赋得古原草送别》等。主要成就:新乐府运动主要倡导者、写下了不少反映人民疾苦的诗篇。我们为您从以下几个方面提供“春风来海上”的详细介绍。一、《正月十五日夜月》的全文 点此查看《正月十五日夜月》的详细内容。岁熟人心乐,朝游复夜游。春风来海上,明月在江头。灯火家家市,笙歌处处楼。无妨思帝里,不合厌杭州。

  • 朝游复夜游的下一句 朝游复夜游的下一句是什么

    朝游复夜游的下一句:春风来海上。朝游复夜游的下一句:春风来海上。诗词名称:《正月十五日夜月》。本名:白居易。别称:诗王、诗魔。字号:字乐天号香山居士,又号醉吟先生。所处时代:唐代。民族族群:汉族。出生地:河南新郑。出生时间:772年2月28日。去世时间:846年9月8日。主要作品:《直中书省》《新亭病后独坐招李侍郎公垂》《忆江南》《家园三绝》《赋得古原草送别》等。主要成就:新乐府运动主要倡导者、写下了不少反映人民疾苦的诗篇。我们为您从以下几个方面提供“朝游复夜游”的详细介绍。一、《正月十五日夜月》的全文 点此查看《正月十五日夜月》的详细内容。岁熟人心乐,朝游复夜游。春风来海上,明月在江头。灯火家家市,笙歌处处楼。无妨思帝里,不合厌杭州。

Top