screen/client/offset/scroll/inner/avail的概念
screen/client/offset/scroll/inner/avail的概念
花儿与少年 发表于1年前
screen/client/offset/scroll/inner/avail的概念
  • 发表于 1年前
  • 阅读 6
  • 收藏 0
  • 点赞 0
  • 评论 0

【腾讯云】新注册用户域名抢购1元起>>>   

screen/client/offset/scroll/inner/avail的概念

名词解释

  • screen: 屏幕。获取有关用户显示器的各种信息。
  • client: 使用区、客户区。指的是客户区,是指浏览器区域。
  • offset: 偏移。指的是目标甲相对目标乙的距离。
  • scroll: 指包含滚动条的属性。
  • inner: 指内部部分,不包含滚动条。
  • avail: 可用区域,不包含滚动条。

window,浏览器宽高信息

//浏览器内容宽 + 滚动条宽
window.innerWidth;

//浏览器内容高 + 滚动条高
window.innerHeight;

//浏览器内容高 + 滚动条高 + 工具栏高 + 浏览器边框(QQ截图时可见边框)
window.outerHeight;

//浏览器内容宽 + 滚动条 + 浏览器边框
window.outerHeight;

window,浏览器偏移信息

//浏览器边框相对于显示器的X偏移量
//方便理解:类似左外边框的宽度。
window.screenLeft;  //兼容:ie6/7/8/9/10、chrome
window.screenX;     //兼容:ie9/10、chrome、firefox

//浏览器边框相对于显示器的Y偏移量
window.screenTop;
window.screenY;

window,浏览器滚动条滚动了的距离

//浏览器滚动条往左滚动了的偏移距离
window.pageXOffset;
window.scrollX;

//浏览器滚动条往下滚动了的偏移距离
window.pageYOffset;
window.scrollY;

screen, 显示器属性

//显示器宽度,像素单位
screen.width;

//显示器高度
screen.height;

//显示器可用宽度,一般与屏幕宽度一致
screen.availWidth

//显示器可用高度
screen.availHeight

element, 元素偏移属性

//content + padding,元素宽高
elment.clientWidth;

element.clientHeight;
//border 等于元素边框大小
element.clientLeft;

//上边框距离
element.clientTop;
//元素大小 content + padding + border [+ 滚动条]
element.offsetWidth;

element.offsetHeight;

// content + padding - 滚动条
element.scrollWidth;
element.scrollHeight;
//元素相对于已定位祖先元素的偏移距离,即设置了position属性的祖先元素。
element.offsetLeft;

element.offsetTop;
//获得水平、垂直滚动条的距离
element.scrollLeft;
element.scrollTop;
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 0
博文 2
码字总数 1066
×
花儿与少年
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: