clientwidth innerWidth offsetWidth

clientwidth innerWidth offsetWidthclientWidth 在任何窗口系统中都是指用户内容能放置的空间clientWidth是每个document一个,一个窗口中可以放置多个document,比如你用frame或iframe就可以放置多个document,这相当于图形界面编程中的MDI(多文档窗口应用,比如Word,Excel就可以同时打开多个文档)。 window.innerWidth能获取…

大家好,又见面了,我是你们的朋友全栈君。

clientWidth 在任何窗口系统中都是指用户内容能放置的空间

clientWidth 是每个 document 一个,一个窗口中可以放置多个 document,比如你用 frame 或 iframe 就可以放置多个 document,这相当于图形界面编程中的 MDI (多文档窗口应用,比如 Word, Excel 就可以同时打开多个文档)。

 

window.innerWidth能获取当前窗口的宽度(包含滚动条),当浏览器宽度调整时,这个值也会跟着变化。

window.innerWidth在IE8浏览器是无效的。代替品–>$(window).width()

$(window).width()获取当前窗口的宽度(不包含滚动条).需要引用jquery.js文件,它是jquery方法。

clientwidth innerWidth offsetWidth

浏览器和屏幕各种高度宽度

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(滚动条)

clientwidth innerWidth offsetWidth

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账号...

(0)


相关推荐

  • Pycharm-用鼠标滚轮放大缩小字体大小[通俗易懂]

    Pycharm-用鼠标滚轮放大缩小字体大小[通俗易懂]1,pycharm字体放大设置:①,File—>setting—>Keymap—>在搜寻框中输入:increase—>IncreaseFontSize(双击)—>在弹出的对话框中选择AddMouseShortcut②,在弹出的对话框中按住ctrl键,鼠标滚轮向上滑动后点击OK。2,Pycharm字体缩小设置:①,File—>setting—>Keymap—>在搜寻框中输入:decrease—>DecreaseFontSize(双击)—>在弹出的对

    2022年10月28日
  • 人工神经网络多层感知器_基于BP网络的多层感知器用来干嘛

    人工神经网络多层感知器_基于BP网络的多层感知器用来干嘛虽然异或问题成为感知器和早期神经网络的阿喀琉斯之踵,但它并非无解的问题。恰恰相反,解决它的思路相当简单,就是将单层感知器变成多层感知器。1,多层感知器(multilayerperceptron)包含一个或多个在输入节点和输出节点之间的隐藏层(hiddenlayer),除了输入节点外,每个节点都是使用非线性激活函数的神经元;2,多层感知器是一类前馈人工神经网络;3,多层感知器的训练包括以下步骤:首先确定给定输入和当前权重下的输出,再将输出和真实值相减得到误差函数,最后根据误差函数更新权重。在训练过程中

    2022年10月21日
  • windows 激活状况 命令查询

    windows 激活状况 命令查询slmgr-ipkKey安装产品密钥slmgr-upk卸载密钥slmgr-ato激活密钥sLUI4显示电话激活选项msinfo32查看电脑组件系统详细信息slmgr-skms激活服务器以下又是产品win8版本激活的显示状态:slmgr.vbs-dlv显示:最为详尽的激活信息,包括:激活ID、安装ID、激活截止日期slmgr.vbs-dli显示:…

  • Android 4.0开发之GridLayOut布局实践

    Android 4.0开发之GridLayOut布局实践在上一篇教程中http://blog.csdn.net/dawanganban/article/details/9952379,我们初步学习了解了GridLayout的布局基本知识,通过学习知道,GridLayout可以用来做一个象TableLayout这样的布局样式,但其性能及功能都要比tablelayout要好,比如GridLayout的布局中的单元格可以跨越多行,而tablelayout则不

  • linux下修改docker容器RabbitMQ端口映射(修改RabbitMQ默认端口)

    linux下修改docker容器RabbitMQ端口映射(修改RabbitMQ默认端口)1.xshell执行以下命令获取docker容器IDdockerps-a2.修改/var/lib/docker/containers/{容器ID+一些字符串}/hostconfig.json中”PortBindings”:{“容器端口/tcp”:[{“HostIp”:””,”HostPort”:”改成你要改的端口”}]3.修改并上传配置文件后执行以下代码sy…

    2022年10月27日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号