获取屏幕宽高width(),outerWidth,innerWidth,clientWidth的区别

转载 2018年04月15日 12:23:25
$(window).width 屏幕可视区域的宽高,不包括滚动条与工具条
document.documentElement.clientWidth 屏幕可视区域的宽高,不包括滚动条与工具条。
window.innerWidth 获得可视区域的宽高,包含纵向滚动条的宽度,IE8和以下不支持
window.outerWidth 获得加上工具条与滚动条窗口的宽度,IE8和以下不支持
document.body.clientWidth 获得body内容的高度
offsetWidth 返回本身的宽高+padding+border+滚动条
offsetLeft 
1、相对于已定位元素的后代元素和一些其他元素,这些属性返回的坐标是相对于祖先元素
2、一般元素,则是相对于文档,返回的是文档坐标。
offsetParent属性指定这些属性所相对的父元素,如果offsetParent为Null,则这些属性都是文档坐标
function getElementPosition(e){
  var x=0;y=0;
   while(e!=null){
     x +=e.offsetLeft;
     y +=e.offsetTop;
     e = e.offsetParent;
    }
    return{x:x,y:y}
}
scrollWidth  content+padding+任何溢出内容的尺寸,所以如果没有溢出时,这些属性与clientWidth一致
scrollLeft 指定的是元素的滚动条的位置,可写,通过设置来让元素内容滚动

引用参考:https://segmentfault.com/a/1190000010746091

clientWidth offsetWidth innerWidth 区别(窗口尺寸 汇总)

原文链接:http://www.cnblogs.com/youxin/archive/2012/09/21/2697514.html scrollWidth  是对象的实际内容的宽,不包边线宽度,...
  • u010874036
  • u010874036
  • 2016-03-22 10:41:48
  • 7314

图解offsetWidth, clientWidth, scrollWidth, innerWidth, outerWidth, pageXOffset等

测试浏览器:ie7~ie11、chrome 和 firefox等。 一、测试1:无滚动条时,offsetWidth、clientWidth和scrollWidth (1)测试代码: Java...
  • lzding
  • lzding
  • 2015-06-05 07:28:28
  • 3699

详解clientWidth,scrollWidth,offsetWidth,innerWidth的区别

详解clientWidth,scrollWidth,offsetWidth,innerWidth的区别
  • mr_fzz
  • mr_fzz
  • 2016-11-04 13:32:06
  • 2999

jQuery中width()、innerWidth()、outerWidth()的区别

jQuery中width()、innerWidth()、outerWidth()的区别 outerWidth() outerWidth()函数用于获取当前匹配元素的外宽度 外宽度默认包括元素...
  • xiaobing_hope
  • xiaobing_hope
  • 2015-12-18 17:29:23
  • 845

jquery 的 outerWidth() 、width() 、innerWidth()

.width()、innerWidth()、outerWidth()方法 计算jQuery对象的宽度,它们之间的区别在于是否把padding、margin计算在内,因此它们的值 width() ...
  • hdchangchang
  • hdchangchang
  • 2012-10-24 10:41:20
  • 4571

js及innerWidth、innerHeight、outerWidth和outerHeight属性

跨浏览器确定一个窗口的大小不是一件简单的事。Firefox.Safari.Opera和Chrome均为此提供了4个属性:innerWidth、innerHeight、 outerWidth和outer...
  • toumingyumaohuiyi
  • toumingyumaohuiyi
  • 2016-11-23 15:04:10
  • 1386

offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式

offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式
  • javaloveiphone
  • javaloveiphone
  • 2016-03-11 13:36:24
  • 10920

jq 计算div宽度--innerwidth,outerwidth,width

width()方法用于获得元素宽度; innerWidth()方法用于获得包括内边界(padding)的元素宽度; outerWidth()方法用于获得包括内边界(padding)和边框(bord...
  • u014665035
  • u014665035
  • 2016-11-25 17:27:33
  • 1090

JQuery属性样式

入口函数定义三种格式 •第一种:$(function(){}); •第二种:$(document).ready(function(){}); •第三种:jQuery(function(){});...
  • arvin_top
  • arvin_top
  • 2017-06-07 21:28:49
  • 163

BOM屏幕宽高width(),outerWidth,innerWidth,clientWidth的区别

基本介绍$(window).width()与$(window).height()$(window).width()与$(window).height():获得的是屏幕可视区域的宽高,不包括滚动条与工具...
  • ynd_sg
  • ynd_sg
  • 2018-03-31 14:03:10
  • 6
收藏助手
不良信息举报
您举报文章:获取屏幕宽高width(),outerWidth,innerWidth,clientWidth的区别
举报原因:
原因补充:

(最多只允许输入30个字)