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

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-06 16:17:24

JS中的宽高(基础知识很重要)的相关文章

js中各种宽高

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

js中获取宽高

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

js中关于窗口的基础知识

一.   打开子窗口的方式 1. 打开一个新窗口的方法:        Window.open (“ 文件路径”,  “_blank”, “ width = 100px,  height = 100px,  toolbar = yes” )       ( 其实里面有很多属性,这里就写这些例子,注意属性的写法,双引号的位置) 2. 固定按钮不动 ( 拖动滑动条时其位置不变 )        在按钮的样式设置中添加 {  position : fixed;  left: 100px;  top:

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即可. 如果没有

编程中无法回避的基础知识---事务

编程中无法回避的基础知识---事务 进行软件开发已经有一段时间了,有些东西虽然一直在用但是并不是很理解为什么去用它,它的机制又是什么,是不是还有其他的用途?就像我们在对数据库进行一系列操作时,我们为了保证数据的一致性往往会用到事务.本文将简单的介绍一下事务的相关知识,和简单用法. 基本概念 定义 事务是将一系列 数据源更新分组或分批的方法,以便在回滚事务时同时提交所有事务或者不提交任何事务[MSDN]. 事务(Transaction)是访问并可能更新数据库中各种数据项的一个程序执行单元(unit

js/jQuery中的宽高

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