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

准确获得页面、窗口高度及宽度的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(抖音搜索懂视),直接咨询即可。

上一篇:

下一篇:

热门图文

  • 送周子华南归的作者 送周子华南归的作者是什么]

    《送周子华南归》陆文圭作者:陆文圭。《送周子华南归》作者:陆文圭。年代:元代。别称:墙东先生。字号:字子方。出生地:江阴(今属江苏)人。出生时间:1252。去世时间:1336。主要作品:《辛卯二月记异》《新移瑞香不得雨有叹》《月·青天一片玉》《挽吉州刘总管》《为刘君符赋乐山诗》等。我们为您从以下几个方面提供送周子华南归的详细介绍。一、《送周子华南归》的全文 点此查看《送周子华南归》的详细内容。此日与君别,重逢未有期。衰年行欲尽,近事或难知。浩荡风云会,萧条草木悲。三吴多俊杰,试与问安危。二、《送周子华南归》陆文圭其他诗词《赤壁图·公瑾子瞻二龙》、《题戴嵩牛图》、《雅宜山在城西五十里有德庵在其下穹寄山福寺》、《送仲华葛兄·蓉城诸葛何绵绵》、《送徐舜辑·彦霖父子魏公客》。相同朝代的诗歌;

  • 次韵叶硕夫南归见贻的全文

    《次韵叶硕夫南归见贻》李弥逊全文:未挂丹题雁塔中,重来溪上觅筠翁。相期老眼横遥碧,莫着征衫走软红。得失漫嗟蝉翼重,才名合见马群空。三年小度惊人手,未信朱衣也不公。《次韵叶硕夫南归见贻》全文:未挂丹题雁塔中,重来溪上觅筠翁。相期老眼横遥碧,莫着征衫走软红。得失漫嗟蝉翼重,才名合见马群空。三年小度惊人手,未信朱衣也不公。作者:李弥逊。年代:宋代。我们为您从以下几个方面提供次韵叶硕夫南归见贻的详细介绍。一、《次韵叶硕夫南归见贻》的全文 点此查看《次韵叶硕夫南归见贻》的详细内容。未挂丹题雁塔中,重来溪上觅筠翁。相期老眼横遥碧,莫着征衫走软红。得失漫嗟蝉翼重,才名合见马群空。三年小度惊人手,未信朱衣也不公。

  • 送周子华南归的作者是什么

    《送周子华南归》陆文圭作者:陆文圭。《送周子华南归》作者:陆文圭。年代:元代。别称:墙东先生。字号:字子方。出生地:江阴(今属江苏)人。出生时间:1252。去世时间:1336。主要作品:《辛卯二月记异》《新移瑞香不得雨有叹》《月·青天一片玉》《挽吉州刘总管》《为刘君符赋乐山诗》等。我们为您从以下几个方面提供送周子华南归的详细介绍。一、《送周子华南归》的全文 点此查看《送周子华南归》的详细内容。此日与君别,重逢未有期。衰年行欲尽,近事或难知。浩荡风云会,萧条草木悲。三吴多俊杰,试与问安危。二、《送周子华南归》陆文圭其他诗词《赤壁图·公瑾子瞻二龙》、《题戴嵩牛图》、《雅宜山在城西五十里有德庵在其下穹寄山福寺》、《送仲华葛兄·蓉城诸葛何绵绵》、《送徐舜辑·彦霖父子魏公客》。相同朝代的诗歌;

  • 次韵叶硕夫南归见贻全文

    《次韵叶硕夫南归见贻》李弥逊全文:未挂丹题雁塔中,重来溪上觅筠翁。相期老眼横遥碧,莫着征衫走软红。得失漫嗟蝉翼重,才名合见马群空。三年小度惊人手,未信朱衣也不公。《次韵叶硕夫南归见贻》全文:未挂丹题雁塔中,重来溪上觅筠翁。相期老眼横遥碧,莫着征衫走软红。得失漫嗟蝉翼重,才名合见马群空。三年小度惊人手,未信朱衣也不公。作者:李弥逊。年代:宋代。我们为您从以下几个方面提供次韵叶硕夫南归见贻的详细介绍。一、《次韵叶硕夫南归见贻》的全文 点此查看《次韵叶硕夫南归见贻》的详细内容。未挂丹题雁塔中,重来溪上觅筠翁。相期老眼横遥碧,莫着征衫走软红。得失漫嗟蝉翼重,才名合见马群空。三年小度惊人手,未信朱衣也不公。

  • 送周子华南归的作者

    《送周子华南归》陆文圭作者:陆文圭。《送周子华南归》作者:陆文圭。年代:元代。别称:墙东先生。字号:字子方。出生地:江阴(今属江苏)人。出生时间:1252。去世时间:1336。主要作品:《辛卯二月记异》《新移瑞香不得雨有叹》《月·青天一片玉》《挽吉州刘总管》《为刘君符赋乐山诗》等。我们为您从以下几个方面提供送周子华南归的详细介绍。一、《送周子华南归》的全文 点此查看《送周子华南归》的详细内容。此日与君别,重逢未有期。衰年行欲尽,近事或难知。浩荡风云会,萧条草木悲。三吴多俊杰,试与问安危。二、《送周子华南归》陆文圭其他诗词《赤壁图·公瑾子瞻二龙》、《题戴嵩牛图》、《雅宜山在城西五十里有德庵在其下穹寄山福寺》、《送仲华葛兄·蓉城诸葛何绵绵》、《送徐舜辑·彦霖父子魏公客》。相同朝代的诗歌;

Top