document window高度的计算
来源:互联网 发布:数控程序仿真软件 编辑:程序博客网 时间:2024/06/18 17:03
js中,有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
document.documentElement.clientWidth
document.body.clientWidth
window.innerWidth > document.body.clientWidth = document.documentElement.clientWidth
(大几个像素而已)
(远远大于)
实用的 JavaScript 方案(涵盖所有浏览器):
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
$(window).width();
$(document).height(); 整个网页文档流
$(document).width();
文档内容有滚动条:$(document).height() >> $(window).height();
height()
innerWidth() 返回元素的宽度、高度(包括内边距)。
innerHeight()
outerWidth() 方法返回元素的宽度、高度(包括内边距和边框)
outerHeight()
outerWidth(true) 方法返回元素的宽度、高度(包括内边距、边框和外边距)。
outerHeight(true)
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5:(不支持window.innerHeight和window.innerWidth属性)
document.documentElement.clientHeightdocument.documentElement.clientWidth
或者
document.body.clientHeightdocument.body.clientWidth
文档内容无滚动条:
document.body.clientHeight = window.innerHeight = document.documentElement.clientHeight;window.innerWidth > document.body.clientWidth = document.documentElement.clientWidth
(大几个像素而已)
文档内容有滚动条:
document.body.clientHeight >> window.innerHeight = document.documentElement.clientHeight;(远远大于)
实用的 JavaScript 方案(涵盖所有浏览器):
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
jQuery中
$(window).height(); 浏览器显示网页内容的部分$(window).width();
$(document).height(); 整个网页文档流
$(document).width();
文档内容有滚动条:$(document).height() >> $(window).height();
jQuery 尺寸方法,返回不包括单位,
width() 方法设置或返回元素的宽度、高度(不包括内边距、边框或外边距)。height()
innerWidth() 返回元素的宽度、高度(包括内边距)。
innerHeight()
outerWidth() 方法返回元素的宽度、高度(包括内边距和边框)
outerHeight()
outerWidth(true) 方法返回元素的宽度、高度(包括内边距、边框和外边距)。
outerHeight(true)
<div style="height:100px;width:300px ;padding:10px; margin:3px; border:1px solid blue"></div>
$("div").width(): 300$("div").height(): 100
$("div").innerWidth()(): 320
$("div").innerHeight(): 120
$("div").outerWidth(): 322
$("div").outerHeight(): 122
$("div").outerWidth(true): 328
$("div").outerHeight(true): 128
0 0
- document window高度的计算
- 关于浏览器window、document、html、body高度的探究
- html窗口(window)高度、文档(document)高度介绍
- document的window对象
- jQuery,javascript获得网页的高度和宽度$(document).height / $(window).height
- html/css基础篇——关于浏览器window、document、html、body高度的探究
- window高度的获取
- window与document的区别
- document和window的区别
- window和document的含义
- window与document的区别
- javascript的window 与 document
- $(document)与$(window)的区别
- js获取宽度 ,各种高度宽度document.body.clientWidth , document.body.clientHeight,window.screen.width 等等
- js获取宽度 ,各种高度宽度document.body.clientWidth , document.body.clientHeight,window.screen.width 等等
- 计算NSTextField的高度
- 计算listview的高度
- 计算Label的高度
- 单元测试
- Python——debug(二)
- 校园网&openwrt记(十三)断网重连的循环版本
- 如何利用Spark提高批量插入Solr的效率
- php标准库(SPL)-数据结构(一)-SplDoublyLinkedList详解
- document window高度的计算
- ex5.34——重载“++,--,+”三个操作符
- Android实战技巧:ViewStub的应用
- 导入appcompat_v7报错:appcompat_v7\res\values-v23\styles_base.xml:20: error: Error retrieving parent for
- 怎么自定义ZBrush 4R7中按钮颜色
- pat1038:统计同成绩学生
- 45-题目1138:进制转换
- 带最小值操作的栈
- Android常用的四种设计模式