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
摘抄自互联网
JS中的宽高(基础知识很重要)的更多相关文章
- js中各种宽高
各种宽高 Javascript: IE中:document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY ...
- js中获取宽高
<script type="text/javascript"> function getWH() { var a = ""; a += " ...
- 第11天:JS中变量、字符串基础知识
一.js简介用来制作页面交互效果,提高用户体验. js页面效果:轮播图.选项卡.地图.表单验证javascript是弱变量类型的语言,变量只需要用var来声明.而java要根据变 量类型来声明, in ...
- js实现未知宽高的元素在指定元素中垂直水平居中
js实现未知宽高的元素在指定元素中垂直水平居中:本章节介绍一下如何实现未知宽高的元素在指定元素下实现垂直水平居中效果,下面就以span元素为例子,介绍一下如何实现span元素在div中实现水平垂直居中 ...
- canvas基础入门(一)canvas的width、height于css样式中的宽高区别
canvas的width.height于css样式中的宽高对画布的内容显示是有所区别的 1.在canvas标签下调用他的width和height,而且是没有单位的宽高,这种指定canvas大小的方法也 ...
- Java中实现异常处理的基础知识
Java中实现异常处理的基础知识 异常 (Exception):发生于程序执行期间,表明出现了一个非法的运行状况.许多JDK中的方法在检测到非法情况时,都会抛出一个异常对象. 例如:数组越界和被0除. ...
- 【IE6的疯狂之一】IE6中奇数宽高的BUG
IE6真是太疯狂了.今天由于项目需要做了这么一个布局:一个外部的相对定位div,内部一个绝对定位的div(right:0), 如图: 可是在IE6下查看,却变成了right:1px的效果了: IE6还 ...
- js/jQuery中的宽高
一.和window有关的宽高 window.innerWidth:浏览器窗口宽度 window.innerHeight:浏览器窗口高度(不包括导航,工具栏等的高度) window.outerWidth ...
- JS/jQ常用宽高及应用
关于js的宽高,随便一搜就是一大堆.这个一大堆对我来说可不是什么好事,看的头都大了.所以今天就总结了一些比较会常用的,并说明一下应用场景. 先来扯一下documentElement和body的微妙关系 ...
随机推荐
- Mvc 简单分页代码
) { string userid = EndUserLoginManage.Instance.loginUserID; ICommentInfoBLL c_bll = new CommentInfo ...
- 使用Topshelf快速搭建Windows服务
1.创建控制台程序 2.安装Topshelf组件 Install-Package Topshelf using System; using System.Timers; using Topshelf ...
- Android Studio--Gradle基础(转)
原文链接:http://stormzhang.com/devtools/2014/12/18/android-studio-tutorial4/ 其实很早之前也写了一篇Gradle的基础博客,但是时间 ...
- Evaluation Clustering methods
There are many evaluation measures available like entropy, recall, precision, F-measure, silhouette ...
- 第七章:利用AdaBoost元算法提高分类性能
本章内容□ 组合相似的分类器来提髙分类性能□应用AdaBoost算法□ 处理非均衡分类问题
- [UCSD白板题] Greatest Common Divisor
Problem Introduction The greatest common divisor \(GCD(a, b)\) of two non-negative integers \(a\) an ...
- invalidate()和postInvalidate()的使用与区别
Android提供了Invalidate方法实现界面刷新,但是Invalidate不能直接在线程中调用,因为他是违背了单线程模型: Android UI操作并不是线程安全的,并且这些操作必须在UI线程 ...
- Make Notepad++ auto close HTML/XML tags after the slash(the Dreamweaver way)
I've been looking for a Notepad++ plugin that can close HTML/XML tags after a slash just like the wa ...
- erlang学习笔记(shell命令)
erlang shell 命令: help(). 可以查看erlang shell内置命令. 比如:m(Mod),可以查看模块Mod. 待续..
- [转] How to change font settings for all UI elements (toolbar and context menus, property editors, etc.)
https://www.devexpress.com/Support/Center/Question/Details/S35762