大家好,又见面了,我是你们的朋友全栈君。
clientWidth 在任何窗口系统中都是指用户内容能放置的空间
clientWidth 是每个 document 一个,一个窗口中可以放置多个 document,比如你用 frame 或 iframe 就可以放置多个 document,这相当于图形界面编程中的 MDI (多文档窗口应用,比如 Word, Excel 就可以同时打开多个文档)。
window.innerWidth能获取当前窗口的宽度(包含滚动条),当浏览器宽度调整时,这个值也会跟着变化。
window.innerWidth在IE8浏览器是无效的。代替品–>$(window).width()
$(window).width()获取当前窗口的宽度(不包含滚动条).需要引用jquery.js文件,它是jquery方法。
浏览器和屏幕各种高度宽度
Javascript:
屏幕可视区域的宽高,不包括滚动条与工具条,跟jquery的(window).width()与(window).height()获得的结果是一样的。
document.documentElement.clientWidth
document.documentElement.clientHeight
document.body.clientWidth //网页可视区域的宽度(body)
document.body.clientHeight //网页body内容的高度(body)
body的height:100%影响document.body.clientHeight的值
offsetWidth & offsetHeight 本身的宽高 + padding + border + 滚动条
document.body.offsetWidth //网页可见区域宽(body),包括border、margin等
document.body.offsetHeight //网页可见区域宽(body),包括border、margin等
document.body.scrollWidth //网页正文全文宽,包括有滚动条时的未见区域
document.body.scrollHeight //网页正文全文高,包括有滚动条时的未见区域
document.body.scrollTop //网页被卷去的Top(滚动条)
document.body.scrollLeft //网页被卷去的Left(滚动条)
window.screenTop //浏览器距离Top
window.screenLeft //浏览器距离Left
window.screen.height //屏幕分辨率的高
window.screen.width //屏幕分辨率的宽
window.screen.availHeight //屏幕可用工作区的高
window.screen.availWidth //屏幕可用工作区的宽
可视区域的宽,但是包含纵向滚动条的宽度(E8以及以下不支持)
window.innerWidth=width + padding + border + 纵向滚动条宽度
window.innerHeight = height + padding + border + 横向滚动条高度
可视区域的宽,包含工具条与滚动条窗口的宽度与高度(E8以及以下不支持)
window.outerWidth=width + padding + border + 纵向滚动条宽度
window.outerHeight = height + padding + border + 横向滚动条高度 + 工具条高度
$(Window).scrollTop() //文档显示区 滚动的高度
(Window).scroll(function(){……}) //窗口滚动时执行
$().offset() 当前元素距离body 的{top:xxx,left:xxx}
Jquery:
屏幕可视区域的宽高,不包括滚动条与工具条
$(window).width() //浏览器当前窗口可视区域宽度
$(window).height() //浏览器当前窗口可视区域高度
$(document).height() //浏览器当前窗口文档的高度
$(document.body).height() //浏览器当前窗口文档body的高度
$(document.body).outerHeight(true) //浏览器当前窗口文档body的总高度 包括border padding margin
$(document).width() //浏览器当前窗口文档对象宽度
$(document.body).width() //浏览器当前窗口文档body的宽度
$(document.body).outerWidth(true) //浏览器当前窗口文档body的总宽度 包括border padding margin
offsetLeft & offsetTop
返回元素的X和Y坐标,相对于已定位元素/相对于文档
scrollWidth & scrollHeight
元素的内容区域+内边距+溢出内容的尺寸.
因此,如果没有溢出时,这些属性与clientWidth和clientHeight是相等的。
scrollLeft & scrollTop
元素的滚动条的位置
scrollLeft和scrollTop都是可写的属性,通过设置它们来让元素中的内容滚动。
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/163038.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...