网页中的各种宽高

Posted by Shen Chaoran on September 22, 2018

各种宽高

window.screen:

  • window.screen.width/window.screen.height
  • window.screen.availWidth/window.screen.availHeight
  • window.screenTop/window.screenLeft

window:

  • window.innerWidth/window.innerHeight
  • window.outWidth/window.outHeight

client:

  • element.clientWidth/element.clientHeight: content + padding - scrollBarWidth
  • element.clientLeft/element.clientTop: border-left/border-top

offset:

  • element.offsetWidth/element.offsetHeight: border + padding + content + scrollBarWidth
  • element.offsetLeft/element.offsetTop:

scroll:

  • element.scrollWidth/element.scrollHeight: content + padding
  • element.scrollLeft/scrollTop: 被卷起的高度/宽度

event:

  • clientX/clientY: 相对浏览器可视区域左上角
  • screenX/screenY: 相对设备屏幕左上角
  • offsetX/offsetY: 相对事件源（event.target）左上角
  • pageX/pageY: 相对网页左上角
  • X/Y: IE属性

各种宽高

jQuery:

  • $element.width()/$element.css(‘width): content
  • $element.innerWidth()/$element.innerHeight(): content + padding
  • $element.outerWidth()/$element.outHeight(): content + padding + border
  • $element.scrollLeft/$element.scrollTop:
  • $element.offset(): 相对于 document 的坐标
  • $element.position(): 相对于父定位容器的坐标

jquery 各种宽高

参考

FEATURED TAGS
生活 如何优雅地写好代码 Angular 响应式编程 RxJS 组件生命周期 组件实例 异步 NodeJS express ControlValueAccessor Depend Injection Change Detection Angular 5 CSS 模型共享与集成 JavaScript event jQuery 浏览器兼容 变化检测 前端
FRIENDS