javascript中的那些宽度和高度

window.outerHeight和window.innerHeight

Window 尺寸

有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:

  • window.innerHeight - 浏览器窗口的内部高度
  • window.innerWidth - 浏览器窗口的内部宽度

对于 Internet Explorer 8、7、6、5:

  • document.documentElement.clientHeight
  • document.documentElement.clientWidth

或者

  • document.body.clientHeight
  • document.body.clientWidth

实用的 JavaScript 方案(涵盖所有浏览器):

1 var w = window.innerWidth ||  document.documentElement.clientWidth || document.body.clientWidth;
2
3 var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

该例显示浏览器窗口的高度和宽度:(不包括工具栏/滚动条)

Window Screen 有关用户 屏幕 信息

window.screen.height

window.screen.width

window.screen.availHeight

window.screen.availWidth

window.screenLeft

window.screenTop

  • screen.availWidth - 可用的屏幕宽度    属性返回访问者屏幕的宽度,以像素计,减去界面特性,比如窗口任务栏。
  • screen.availHeight - 可用的屏幕高度   属性返回访问者屏幕的高度,以像素计,减去界面特性,比如窗口任务栏。

  

  1. 无padding  无滚动

  2.有padding  无滚动    可视区的宽度 = 150 + 10*2 = 170

  3.有padding 有滚动条    clientWidth = 150 + 10*2 -滚动条宽度 = 153

-------------------------------------------------------------------------------我是分割线---------------------------------------------------------------------------------------------------

  就是边框

时间: 2024-08-13 08:35:49

javascript中的那些宽度和高度的相关文章

javascript获取网页的宽度,高度,屏幕的宽度,高度

//网页宽度 var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; //网页高度 var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; //屏幕宽度 var xw = screen.availWidth; //屏幕高度 var

Android 设置子控件的宽度或高度为 match_parent来填充父控件中的剩余宽度或高度的方法

先上几张效果图, 如下:          上述四张图要实现的布局效果是: 假如父控件中包含两个子控件, 其中一个子控件(上图中为红色button)的宽度是固定数值, 而另一个子控件(上图中为绿色button)的宽度不固定, 要想让这两个子控件的总宽度刚好等于父控件的宽度.可以将宽度不固定的那个控件的宽度设置为match_parent来实现, 但有些细节需要注意, 否则即使设置了match_parent, 也不能出现如上的效果. 注意细节如下: 上述效果可以使用RelativeLayout实现.

android中控制ListView宽度和高度

============问题描述============ 给listveiw填充item布局都是wrap_content,listview自身也使用wrap_content,可是实际显示效果listview宽度都是全屏,求解决办法 item布局: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="wrap_content

JavaScript与jQuery中获取屏幕的宽度和高度的常用方法以及HTML中精确定位

浏览器的宽高示意图: JavaScript中常用的方法: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offsetWidth (包括边线的宽) 网页可见区域高: document.body.offsetHeight (包括边线的高) 网页正文全文宽: document.body.scrollWidth 网页正文全文高: document.body.scr

JavaScript中有关高度和宽度的API介绍

JavaScript世界中,有很多看起来能够帮我们知道网页宽度和高度的API,但太繁多了,而且容易弄混.不容易区分它们.下面我就来介绍一下,这些API到底是什么意思,之间的区别又在哪里. 一.设备的分辨率 window.screen.width × window.screen.height 台式机:1440 × 900 / 手机:360 × 640 二.浏览器的分辨率 window.screen.availWidth × window.screen.availHeight 台式机Chrome:1

javascript中获取dom元素高度和宽度

javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWidth (包括边线的宽)网页可见区域高: document.body.offsetHeight (包括边线的高)网页正文全文宽: document.body.scrollWidth网页正文全文高: document.body.scrollH

javascript中各个高度与宽度区分

js获取文档的高度:Math.max(document.body.scrollHeight,document.documenElement.scrollHeight); js获取浏览器可视区域的高度: Math.max(document.body.clientHeight, document.documentElement.clientHeight) // window.innerHeight; js获取滚动条高度:document.documentElement.scrollTop || do

javascript 获取滚动条高度+常用js页面宽度与高度

javascript 获取滚动条高度+常用js页面宽度与高度 js(1)  /******************** * 取窗口滚动条高度  ******************/function getScrollTop(){    var scrollTop=0;    if(document.documentElement&&document.documentElement.scrollTop)    {        scrollTop=document.documentElem

图片宽度和高度都大于div,实现图片在div中居中

<style type="text/css"> #out{height:100px; width:150px; position:relative; overflow:hidden;} #mid{position:absolute;top:50%; left:50%; width:1000px; margin-left:-500px; text-align:center;} #in{ position:relative; top:-50%;} </style>