Window innerWidth 和 innerHeight 属性

定义和用法

innerheight 返回窗口的文档显示区的高度。

innerwidth 返回窗口的文档显示区的宽度。

注意:使用 outerWidth 和 outerHeight 属性获取加上工具条与滚动条窗口的宽度与高度

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>innerWidth和innerHeight</title>
<style>
*{ padding:0; margin:0; }
#div1{border:1px solid #F00;height:2000px;}
</style>
<script>
   function change(){
	   var w=window.innerWidth;
       var h=window.innerHeight;
       var oDiv=document.getElementById(‘div1‘);
       oDiv.innerHTML="width:"+w+","+"height:"+h;
   };
</script>
</head>

<body>
<div id="div1">
    <input type="button" value="点击我,会有惊喜哦~" onclick="change()">
</div>
</body>
</html>

注意:获取窗口的高度与宽度(不包含工具条与滚动条):

时间: 2024-09-08 22:51:30

Window innerWidth 和 innerHeight 属性的相关文章

使用$(window).width(),window.outerWidth,window.innerWidth,document.documentElement.clientWidth,document.body.clientWidth的区别与兼容分析

下面先以谷歌为例做数据分析,兼容性问题后面再说. 先上一张图(图最好理解): firebug打印结果: 使用$(window).width()与$(window).height():1349 392 使用window.outerWidth与window.outerHeight:1366 728 使用window.innerWidth与window.innerHeight:1366 392 使用document.documentElement.clientWidth与document.docume

window对象的常用属性,常用方法

window对象的常用属性: window.self 返回当前窗口的引用 window.parent   返回当前窗体的父窗体对象 window.top 返回当前窗体最顶层的父窗体的引用 window.outerwidth       返回当前窗口的外部宽 window.outerheight  返回当前窗口的外部高 window.innerwidth       返回当前窗口的可显示区域宽 window.innerheight  返回当前窗口的可显示区域高 提示:通过直接在Chrome控制台中

JS的window对象下的属性的方法和注意事项

一.通过浏览器获得屏幕的尺寸 screen.width screen.height screen.availHeight //获取去除状态栏后的屏幕高度 screen.availWidth //获取去除状态栏后的屏幕高度 二.获取浏览器窗口内容的尺寸 //高度 window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight //宽度 window.innerWidth || doc

05 - outerHeight、outerWidth 和 innerWidth、innerHeight 和 width() height()

一.jQuery方法 outerWidth() 和 outerHeight() 1.outerWidth()    - 方法返回第一个匹配元素的外部宽度. - 返回第一个匹配元素的外部宽度.该宽度= content + padding + border - 如需包含 margin,使用 outerWidth(true).该宽度= content + padding + border + margin <style> .box { width: 200px; height: 200px; pad

JavaScript基础 window.innerWidth 获取网页的宽度与高度 IE9,火狐可以用

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=ut

jQuery 的 width()、height()、innerWidth()、innerHeight()、outWidth()、outHeight() 的区别

jQuery width() 和 height() 方法 width() 方法设置或返回元素的宽度(不包括内边距.边框或外边距). height() 方法设置或返回元素的高度(不包括内边距.边框或外边距). <!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).

找出并打印window非原生扩展属性 windowExtendAttr.js

supme 找出并打印window非原生扩展属性 windowExtendAttr.js window扩展属性,扩展方法,扩展函数,非原生属性,非原生方法,非原生函数 http://owmivsi48.bkt.clouddn.com/windowExtendAttr.js // windowExtendAttr.js (function() { var iframe = document.createElement("iframe"); document.body.appendChil

width() 、 height() 方法;innerWidth() 、innerHeight() 方法;outerWidth() 、 outerHeight() 方法的区别

1.width() . height() 方法 设置或返回元素的宽度.高度(不包括内边距.边框或外边距): 2.innerWidth() .innerHeight() 方法 返回元素的宽度.高度(包括内边距): 3.outerWidth() . outerHeight() 方法 返回元素的宽度.高度(包括内边距和边框): 原文地址:https://www.cnblogs.com/hwldyz/p/9335850.html

window.open()新窗口属性大全

语法:window.open(pageurl,name,parameters); window对象的open()方法用于创建一个新的窗口实例,新创建的窗口的外观由参数:parameters指定.新窗口中打开的文档由参数: pageurl指定.系统能够根据参数:name确定的名称访问该窗口. 下表为parameters参数表: 参数 衩始值 说明 alwaysLowered yes/no 指定窗口隐藏在所有窗口之下. alwaysRaised yes/no 指定窗口浮在所有窗口之上. depend