网页可见区域宽：documentbodyclientWidth
网页可见区域高：documentbodyclientHeight
网页可见区域宽：documentbodyoffsetWidth (包括边线的宽)
网页可见区域高：documentbodyoffsetHeight (包括边线的宽)
网页正文全文宽：documentbodyscrollWidth
网页正文全文高：documentbodyscrollHeight
网页被卷去的高：documentbodyscrollTop
网页被卷去的左：documentbodyscrollLeft
网页正文部分上：windowscreenTop
网页正文部分左：windowscreenLeft
屏幕分辨率的高：windowscreenheight
屏幕分辨率的宽：windowscreenwidth
屏幕可用工作区高度：windowscreenavailHeight
屏幕可用工作区宽度：windowscreenavailWidth
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
eventclientX 相对文档的水平座标
eventclientY 相对文档的垂直座标
eventoffsetX 相对容器的水平坐标
eventoffsetY 相对容器的垂直坐标
documentdocumentElementscrollTop 垂直方向滚动的值
eventclientX+documentdocumentElementscrollTop 相对文档的水平座标+垂直方向滚动的量
IE，FireFox 差异如下：
IE60、FF106+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE50/55：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
网页可见区域宽： documentbodyclientWidth
网页可见区域高： documentbodyclientHeight
网页可见区域宽： documentbodyoffsetWidth (包括边线的宽)
网页可见区域高： documentbodyoffsetHeight (包括边线的高)
网页正文全文宽： documentbodyscrollWidth
网页正文全文高： documentbodyscrollHeight
网页被卷去的高： documentbodyscrollTop
网页被卷去的左： documentbodyscrollLeft
网页正文部分上： windowscreenTop
网页正文部分左： windowscreenLeft
屏幕分辨率的高： windowscreenheight
屏幕分辨率的宽： windowscreenwidth
屏幕可用工作区高度： windowscreenavailHeight
屏幕可用工作区宽度： windowscreenavailWidth
－－－－－－－－－－－－－－－－－－－
技术要点
本节代码主要使用了Document对象关于窗口的一些属性，这些属性的主要功能和用法如下。
要得到窗口的尺寸，对于不同的浏览器，需要使用不同的属性和方法：若要检测窗口的真实尺寸，在Netscape下需要使用Window的属性；在
IE下需要 深入Document内部对body进行检测；在DOM环境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。
Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。
Document对象的body属性对应HTML文档的标签。Document对象的documentElement属性则表示HTML文档的根节点。
documentbodyclientHeight表示HTML文档所在窗口的当前高度。documentbody clientWidth表示HTML文档所在窗口的当前宽度。
实现代码
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN"
">
侦听“屏幕旋转”事件，一旦屏幕旋转就在回调函数中重新获得元素的宽和高。
如果你用jquery的话可以这样写：
$(window)on('orientationchange', function() {
var $el = $("#el"); // 需要重新获得宽和高的元素
var newWidth = $elwidth(); // 新的宽
var newHeight = $elheight(); // 新的高
});
用 JavaScript 准确获取手机屏幕的宽度和高度
documentdocumentElementclientWidth; documentdocumentElementclientHeight;
这个得到的是设备像素可见宽高，比如iPhone 4s在微信内设置了viewport为1的时候为320416(手机480 - 微信状态栏64), iPhone 5里为320504
小部分手机获取到的宽高并不正确。比如上面说的screenwidth screenheight这些数据在有的手机上并不准确
第一种情况就是宽高都写在样式表里，就比如#div1{width:120px;}。这中情况通过#div1stylewidth拿不到宽度，而通过#div1offsetWidth才可以获取到宽度。
第二种情况就是宽和高是写在行内中，比如style="width:120px;"，这中情况通过上述2个方法都能拿到宽度。（什么是行内，就是直接在html标签上写样式）
小结，因为idoffsetWidth和idoffsetHeight无视样式写在样式表还是行内，所以我们获取元素宽和高的时候最好用这2个属性。注意如果不是写在行内style中的属性都不能通过idstyleatrr来获取。
现在的前端制作很少直接把样式写style里了，都是写在样式表里。如果你要获取的样式没有相对应的（就像#div1stylewidth对 应#div1offsetWidth），就只能分别针对不用浏览器来获取样式表的属性了，可以试着搜索“JS 获取样式属性”之类的。
代码：
var o = documentgetElementById("view");var h = ooffsetHeight; //高度var w = ooffsetWidth; //宽度
扩展资料：
js编程:
JavaScript是一种脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。直译语言的弱点是安全性较差，而且在JavaScript中，如果一条运行不了，那么下面的语言也无法运行。而其解决办法就是于使用try{}catch(){}。
Javascript被归类为直译语言，因为主流的引擎都是每次运行时加载代码并解译。V8是将所有代码解译后再开始运行，其他引擎则是逐行解译（SpiderMonkey会将解译过的指令暂存，以提高性能，称为实时编译），但由于V8的核心部份多数用Javascript撰写（而SpiderMonkey是用C++）。
因此，在不同的测试上，两者性能互有优劣。与其相对应的是编译语言，例如C语言，以编译语言编写的程序在运行之前，必须经过编译，将代码编译为机器码，再加以运行。
参考资料：
您好：
<html>
<script>
function a(){
documentwrite(
"屏幕分辨率为："+screenwidth+""+screenheight
+"<br />"+
"屏幕可用大小："+screenavailWidth+""+screenavailHeight
+"<br />"+
"网页可见区域宽："+documentbodyclientWidth
+"<br />"+
"网页可见区域高："+documentbodyclientHeight
+"<br />"+
"网页可见区域宽(包括边线的宽)："+documentbodyoffsetWidth
+"<br />"+
"网页可见区域高(包括边线的宽)："+documentbodyoffsetHeight
+"<br />"+
"网页正文全文宽："+documentbodyscrollWidth
+"<br />"+
"网页正文全文高："+documentbodyscrollHeight
+"<br />"+
"网页被卷去的高："+documentbodyscrollTop
+"<br />"+
"网页被卷去的左："+documentbodyscrollLeft
+"<br />"+
"网页正文部分上："+windowscreenTop
+"<br />"+
"网页正文部分左："+windowscreenLeft
+"<br />"+
"屏幕分辨率的高："+windowscreenheight
+"<br />"+
"屏幕分辨率的宽："+windowscreenwidth
+"<br />"+
"屏幕可用工作区高度："+windowscreenavailHeight
+"<br />"+
"屏幕可用工作区宽度："+windowscreenavailWidth
);
}
</script>
<body on
load="a()" >
</body>
</html>
您要用这个尺寸的话，只要用可用大小来显示就可以了。就是第二个屏幕可用大小。
<script>
windowonload = function(){
//把屏幕宽度赋值给该元素
documentgetElementById("float_banner")stylewidth = windowscreenwidth + 'px';
}
</script>
的却，在css代码页可以执行js代码，但是，不建议这样做
以上就是关于js实现网页 高度和宽度成比例的代码全部的内容，包括:js实现网页 高度和宽度成比例的代码、我想写一个根据不同浏览器宽度比如：电脑，平板，手机，三种不同分辨率调取不同css样式的JS，、javascript js 如何在手机屏幕旋转后 获取一个对象的新高度和宽度,不是屏幕的等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）