zoukankan      html  css  js  c++  java
  • clientX,screenX,pageX,offsetX的异同

    pageX/pageY:

    鼠标相对于整个页面的X/Y坐标。注意,整个页面的意思就是你整个网页的全部,比如说网页很宽很长,宽2000px,高3000px,那pageX,pageY的最大值就是它们了。

    特别说明:IE不支持!

    offsetX/offsetY:

    得出的结果跟pageX/pageY一样,既然如此,它有什么存在价值?因为:

    特别说明:只有IE支持!相当于IE下的pageX,pageY.

    clientX/clientY

    事件发生时鼠标在浏览器内容区域的X/Y坐标(不包含滚动条)。浏览器内容区域即浏览器窗口中用来显示网页的可视区域,注意这个可视,也就是说需要拖动滚动条才能看到的区域不算。当你将浏览器窗口缩小时,clientX/clientY的最大值也会缩小,但始终,它们的最大值不会超过你浏览器可视区域。

    特别说明:IE下此属性不规范,它们的最小值不是0而是2,也就是说IE下的clientX/clientY与火狐下的始终大2px

    screenX/screenY:

    顾名思义,就是鼠标在屏幕上的坐标。screenX,screenY的最大值不会超过你的屏幕分辨率。

    常用:

    HTML里是document.body
    XHTML里是document.documentElement

    网页可见区域宽: 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;


    scrollHeight: 获取对象的滚动高度。 
    scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
    scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
    scrollWidth:获取对象的滚动宽度
    offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
    offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
    offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 
    event.clientX 相对文档的水平座标
    event.clientY 相对文档的垂直座标
    event.offsetX 相对容器的水平坐标
    event.offsetY 相对容器的垂直坐标


    document.documentElement.scrollTop 垂直方向滚动的值
    event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

  • 相关阅读:
    leetcode231 2的幂 leetcode342 4的幂 leetcode326 3的幂
    leetcode300. Longest Increasing Subsequence 最长递增子序列 、674. Longest Continuous Increasing Subsequence
    leetcode64. Minimum Path Sum
    leetcode 20 括号匹配
    算法题待做
    leetcode 121. Best Time to Buy and Sell Stock 、122.Best Time to Buy and Sell Stock II 、309. Best Time to Buy and Sell Stock with Cooldown 、714. Best Time to Buy and Sell Stock with Transaction Fee
    rand7生成rand10,rand1生成rand6,rand2生成rand5(包含了rand2生成rand3)
    依图
    leetcode 1.Two Sum 、167. Two Sum II
    从分类,排序,top-k多个方面对推荐算法稳定性的评价
  • 原文地址:https://www.cnblogs.com/lbnnbs/p/6685973.html
Copyright © 2011-2022 走看看