求一段JS代码，能取得浏览器可视界面高度，并根据高度值改变网页显示的百分比

windowonresize=function ()

{

var iHeight = documentdocumentElementclientHeight||documentbodyclientHeight;

objstyleheight=iHeight;

}

上面其中的obj就是你要处理的对象也就是那个要填满屏幕的div

var width = documentbodyscrollHeight;

//获取屏幕高度

documentgetElementById("//自己设置个id 用bytagname会有兼容问题")stylemargin-top

javascript screen对象获取屏幕宽高如alert(screenheight)

availHeight 属性 -- 窗口可以使用的屏幕高度，单位像素

availWidth 属性 -- 窗口可以使用的屏幕宽度，单位像素

colorDepth 属性 -- 用户浏览器表示的颜色位数，通常为32位(每像素的位数)

pixelDepth 属性 -- 用户浏览器表示的颜色位数，通常为32位(每像素的位数)（IE不支持)

height 属性 -- 屏幕的高度，单位像素

width 属性 -- 屏幕的宽度，单位像素

div设置定位,宽度高度设为屏幕一般半即可，至于居中的话可以绝对定位

1、documentbodyclientWidth;//网页可见区域宽

2、documentbodyclientHeight;//网页可见区域高

3、documentbodyoffsetWidth;//网页可见区域宽(包括边线的宽)

4、documentbodyoffsetHeight;//网页可见区域高(包括边线的高)

5、documentbodyscrollWidth;//网页正文全文宽

6、windowscreenavailHeight;//屏幕可用工作区高度

7、windowscreenavailWidth;//屏幕可用工作区宽度

8、alert($(documentbody)outerWidth(true));//浏览器时下窗口文档body的总宽度 包括border padding margin

9、alert($(documentbody)width());//浏览器时下窗口文档body的高度

扩展资料：

1、alert($(window)height()); //浏览器时下窗口可视区域高度

2、alert($(document)height()); //浏览器时下窗口文档的高度

3、alert($(documentbody)height());//浏览器时下窗口文档body的高度

4、alert($(documentbody)outerHeight(true));//浏览器时下窗口文档body的总高度 包括border padding margin

5、alert($(window)width()); //浏览器时下窗口可视区域宽度

6、alert($(document)width());//浏览器时下窗口文档对于象宽度

7、alert($(document)scrollTop()); //获取滚动条到顶部的垂直高度

8、alert($(document)scrollLeft()); //获取滚动条到左边的垂直宽度

解决遮罩层不能覆盖整个页面问题 原创

2017-07-18 18:15:51

3点赞

T_world

码龄8年

关注

最近的项目需要一个点击，然后d出遮罩层的效果，于是在页面中加了一个遮罩层（设定高度为100%）。

但是今天偶然发现，遮罩层只能遮住一屏的高度，若页面比一屏高的话，只要向下滚就可以发现没有被遮住的部分。

查资料得知，出现这种现象的原因是虽然设置了遮罩层的高度为100%，但是js代码执行的时候自动获取的其实还是当前屏幕的高度，因此导致它只能遮住一屏的内容。那么解决的方案也就是获取屏幕高度和当前页面高度，选取较大的一个设置为遮罩层的高度即可。

修正的代码如下，亲测有效：

需要注意的是，在设置遮罩层的高度的时候后面一定要拼接上‘px’这个字符串，开始时我没有拼接，发现代码完全无效，纠结了很久……

打开CSDN，阅读体验更佳

css+js+html遮罩层实例,javascript实现遮罩层动态效果实例_eqzzzlibr

js代码部分: windowοnlοad=function(){ windowοnscrοll=function(){ //动态设置遮罩层的宽高与屏幕可见宽高一致,实现被遮罩页面的全覆盖 documentgetElementById("shade")stylewidth=documentbodyclientWidth+"px";

实现iframe中子页面的d框遮罩层遮盖父页面等整个页面

　js代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 !function(win) { function resize() { var domWidth = domElegetBoundingClientRect()width; if(domWidth / v > 540){ domWidth = 540 v; } winrem = domWidth / 16; domElestylefontSize = winrem + "px"; } var v, initial_scale, timeCode, dom = windocument, domEle = domdocumentElement, viewport = domquerySelector('meta[name="viewport"]'), flexible = domquerySelector('meta[name="flexible"]'); if (viewport) { //viewport：<meta name="viewport"content="initial-scale=05, minimum-scale=05, maximum-scale=05,user-scalable=no,minimal-ui"/> var o = viewportgetAttribute("content")match(/initial-scale=(["'])([d]+)1/); if(o){ initial_scale = parseFloat(o[2]); v = parseInt(1 / initial_scale); } } else { if (flexible) { var o = flexiblegetAttribute("content")match(/initial-dpr=(["'])([d]+)1/); if(o){ v = parseFloat(o[2]); initial_scale = parseFloat((1 / v)toFixed(2)) } } } if (!v && !initial_scale) { var n = (winnavigatorappVersionmatch(/android/gi), winnavigatorappVersionmatch(/iphone/gi)); v = windevicePixelRatio; v = n v >= 3 3 : v >= 2 2 : 1 : 1, initial_scale = 1 / v } //没有viewport标签的情况下 if (domElesetAttribute("data-dpr", v), !viewport) { if (viewport = domcreateElement("meta"), viewportsetAttribute("name", "viewport"), viewportsetAttribute("content", "initial-scale=" + initial_scale + ", maximum-scale=" + initial_scale + ", minimum-scale=" + initial_scale + ", user-scalable=no"), domElefirstElementChild) { domElefirstElementChildappendChild(viewport) } else { var m = domcreateElement("div"); mappendChild(viewport), domwrite(minnerHTML) } } windpr = v; winaddEventListener("resize", function() { clearTimeout(timeCode), timeCode = setTimeout(resize, 300) }, false); winaddEventListener("pageshow", function(b) { bpersisted && (clearTimeout(timeCode), timeCode = setTimeout(resize, 300)) }, false); / 个人觉得没必要完成后就把body的字体设置为12 "complete" === domreadyState dombodystylefontSize = 12 v + "px" : domaddEventListener("DOMContentLoaded", function() { //dombodystylefontSize = 12 v + "px" }, false); / resize(); }(window);

萍脊�旧杓撇渴紫�杓剖π�结合网上的一些谈论特整理如下： 首屏的高度直接跟客户端的各种客观的条件有关系，因为我们要确定首屏的高度(标注首屏线)就需要结合一些相对准确的内部统计数据来分析了，根据各个客户端的 *** 作系统、浏览器分布和屏幕分辨率等情况，并结合常见浏览器状态栏、任务栏等高度进行分析如下： 第一步：分析常见分辨率及浏览器下高度数据 常见浏览器分辨率表 综合上面表中各个分辨率及浏览器下的统计数据，我们很容易画出两条首屏线，分别为 580PX 和 710PX，对应不同的分辨率。 用户可见区域高度统计图 通过对大于30W台客户端用户进行测试，得到的测试数据如下： 1) viewport 高度低于等于 580 的有 116786 个人，占 4464% 2) viewport 高度低于等于 720 的有 216227 个人，占 8264% 3) viewport 高度低于等于 800 的有 241420 个人，占 9227% 4) viewport 高度低于等于 900 的有 259174 个人，占 9906% 第三步：浏览器可见区域热区图分析 浏览器常见热区分布图 综合上面三个步骤，最终我们可以确定： 1、通过分析上面浏览器常见热区分布图我们可以看出来：在网页设计时如果把页面首屏高度定在大于600像素的分辨率上，有可能会导致很多的用户看不完整，考虑到良好的用户体验度，小K建议：网页设计师在设计网页时以600像素作为首屏高度来设计; 2、根据用户可见区域高度统计图及整体二八比例划分的原则，如果把首屏高度确定在710像素可以照顾到约80%的用户群体，小K建议：前端开发在做页面时可考虑把 710 像素视为首屏区域高度，采用技术手段对首屏的表现进行优先加载可获得良好的用户体验度。

侦听“屏幕旋转”事件，一旦屏幕旋转就在回调函数中重新获得元素的宽和高。

如果你用jquery的话可以这样写：

$(window)on('orientationchange', function() {

var $el = $("#el"); // 需要重新获得宽和高的元素

var newWidth = $elwidth(); // 新的宽

var newHeight = $elheight(); // 新的高

});

以上就是关于求一段JS代码，能取得浏览器可视界面高度，并根据高度值改变网页显示的百分比全部的内容，包括:求一段JS代码，能取得浏览器可视界面高度，并根据高度值改变网页显示的百分比、js 怎么根据获取到的可用屏幕高度设置div的marginTop、如何用js根据屏幕高度控制div高度等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！