js中各种宽高

各种宽高

Javascript:

IE中:
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
FireFox中:
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
Opera中:
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)
document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)

alert(document.body.clientWidth); //网页可见区域宽(body)

alert(document.body.clientHeight); //网页可见区域高(body)

alert(document.body.offsetWidth); //网页可见区域宽(body),包括border、margin等

alert(document.body.offsetHeight); //网页可见区域宽(body),包括border、margin等

alert(document.body.scrollWidth); //网页正文全文宽,包括有滚动条时的未见区域

alert(document.body.scrollHeight); //网页正文全文高,包括有滚动条时的未见区域

alert(document.body.scrollTop); //网页被卷去的Top(滚动条)

alert(document.body.scrollLeft); //网页被卷去的Left(滚动条)

alert(window.screenTop); //浏览器距离Top

alert(window.screenLeft); //浏览器距离Left

alert(window.screen.height); //屏幕分辨率的高

alert(window.screen.width); //屏幕分辨率的宽

alert(window.screen.availHeight); //屏幕可用工作区的高

alert(window.screen.availWidth); //屏幕可用工作区的宽

Jquery

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

-转载

时间: 2024-10-17 12:31:46

js中各种宽高的相关文章

JS中的宽高(基础知识很重要)

IE中:document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度document.documentElement.clientWidth ==> 可见区域宽度document.documentElement.clientHeight ==> 可见区域高度FireFox中:document.body.clientWidth ==> BODY对象宽度document.body.cli

js中获取宽高

<script type="text/javascript"> function getWH() { var a = ""; a += " 网页可见区域宽:" + document.body.clientWidth + "\n"; a += " 网页可见区域高:" + document.body.clientHeight + "\n"; a += " 网页可见区域宽

js实现未知宽高的元素在指定元素中垂直水平居中

js实现未知宽高的元素在指定元素中垂直水平居中:本章节介绍一下如何实现未知宽高的元素在指定元素下实现垂直水平居中效果,下面就以span元素为例子,介绍一下如何实现span元素在div中实现水平垂直居中效果,代码如下: <!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.soft

js获取浏览器宽高、网页宽高、屏幕宽高、鼠标位置等(带图片说明)

网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;(点击查看大图) 网页可见区域宽: document.body.offsetWidth (包括边线的宽);网页可见区域高: document.body.offsetHeight (包括边线的宽);(点击查看大图)有没有发现,offsetWidth和clientWidth的区别,offsetWidt是连滚动条一起包含在内的. 网页正文全文宽: documen

JS和jQuery宽高详解(上篇)

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: justify; font: 12.5px "Trebuchet MS" } li.li1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: justify; font: 12.5px "Trebuchet MS" } span.s1 { } span.s2 { font: 12.0px Helvetica } ol.o

各种情况上JS获取元素宽高

各种情况下JS获取元素宽高 为了叙述简单,这里仅拿width示例. 情景一,元素style属性设置了width/height <div style="width:996px">test<div><script> var div = document.getElementsByTagName('div')[0]; alert(div.style.width);</script>默认分类 如上,使用el.style.width即可. 如果没有

js/jQuery中的宽高

一.和window有关的宽高 window.innerWidth:浏览器窗口宽度 window.innerHeight:浏览器窗口高度(不包括导航,工具栏等的高度) window.outerWidth:浏览器窗口宽度(很多时候===window.innerWidth) window.outerHeight:浏览器窗口高度(包括导航,工具栏等的高度) window.screen.width:用户设备屏幕的宽度 window.screen.height:用户设备屏幕的高度 window.screen

JS和jQuery宽高详解(中篇)

JS实例练习 首先了解一下document.documentElement与document.body之间的小区别,这两一个元素后者是前者的子集,也就是父子关系. 1)可视区域计算 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: justify; font: 12.5px "Trebuchet MS" } span.s1 { } 实现原理:div元素到窗口顶部的高度小于窗口的可视高度,则执行对div绑定的函数. 这里获取div元素

原生JS获取元素宽高实践详解

开篇的话 任何不是亲身实践中求得的知识,都不是属于你的. 任何求得的知识不去时常温习运用,也不是属于你的. 记录由来 在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才排查出是获取元素高度那里出了问题,这个问题记忆在书上或视频中看到过,许久没用,用的时候就想当然了.遂决定深入剖析用法,增加记忆,记录发表出来,也能给各位前端同行.求学者增加印象. 出错之处 秉承结构.样式.行为分离的宗旨,每次不管大小案例都是分开写html.css.js.这也算抛砖引出了我犯错的玉. 原css