美文网首页
JS获取各种宽高

JS获取各种宽高

作者: CodeMT | 来源:发表于2023-08-03 15:17 被阅读0次
    描述 用法
    网页可见区域宽 document.body.clientWidth
    网页可见区域高 document.body.clientHeight
    网页可见区域宽 document.body.offsetWidth (包括边线的宽)
    网页可见区域高 document.body.offsetHeight (包括边线的高)
    网页正文全文宽 document.body.scrollWidth
    网页正文全文高 document.body.scrollHeight
    网页被卷去的高 document.body.scrollTop
    网页被卷去的左 document.body.scrollLeft
    网页正文部分上 window.screenTop
    网页正文部分左 window.screenLeft
    屏幕分辨率的高 window.screen.height
    屏幕分辨率的宽 window.screen.width
    屏幕可用工作区高度 window.screen.availHeight
    屏幕可用工作区宽度 window.screen.availWidth

    client与offset为只读属性,scroll为可读写属性

    属性 说明
    clientWidth 获取元素可视部分的宽度,即 CSS 的 width 和 padding 属性值之和,元素边框和滚动条不包括在内,也不包含任何可能的滚动区域
    clientHeight 获取元素可视部分的高度,即 CSS 的 height 和 padding 属性值之和,元素边框和滚动条不包括在内,也不包含任何可能的滚动区域
    offsetWidth 元素在页面中占据的宽度总和,包括 width、padding、border 以及滚动条的宽度
    offsetHeight 元素在页面中占据的高度总和,包括 height、padding、border 以及滚动条的宽度
    scrollWidth 当元素设置了 overflow:visible 样式属性时,元素的总宽度,也称滚动宽度。在默认状态下,如果该属性值大于 clientWidth 属性值,则元素会显示滚动条,以便能够翻阅被隐藏的区域
    scrollHeight 当元素设置了 overflow:visible 样式属性时,元素的总高度,也称滚动高度。在默认状态下,如果该属性值大于 clientWidth 属性值,则元素会显示滚动条,以便能够翻阅被隐藏的区域

    相关文章

      网友评论

          本文标题:JS获取各种宽高

          本文链接:https://www.haomeiwen.com/subject/upbbjdtx.html