• js中一些关于尺寸和位置的东西


    原生
    offset

    offsetWidth和offsetHeight

    怎么获取元素占据的空间大小 width + padding + border
    css(div,'width');只能获取元素的宽度(不包含padding、border)
    元素.offsetWidth 元素占据的宽度 width + padding + border
    元素.offsetHeight 元素占据的高度 height + padding + border


    offsetLeft、offsetTop、offsetParent

    1、offsetLeft 元素相对于第一个使用定位元素的左边的距离

    2、offsetTop 元素相对于第一个使用定位元素的上边距离

    3、offsetParent 第一个使用定位的父级元素(如果没有就是body)


    当有滚动条时:
    var sTop = document.documentElement.scrollTop||document.body.scrollTop
    获取滑动的高度
    var cHeight = document.documentElement.clientHeight||document.body.clientHeight;
    获取显示高度


    事件对象
    offsetX、offsetY、clientX、clientY、pageX、pageY、screenX、screenY

    offsetX、offsetY:
    鼠标相对于事件源元素(srcElement)的X,Y坐标
    clientX、clientY:
    鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。
    pageX、pagey:
    类似于event.clientX、event.clientY,但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性,但得到了
    广泛支持。IE事件中没有这2个属性
    screenX、screenY:
    鼠标相对于用户显示器屏幕左上角的X,Y坐标。

    jquery:

    height 取得匹配元素当前计算的高度值(px)。
    $("p").height();

    width 取得第一个匹配元素当前计算的宽度值(px)。
    $("p").width();

    innerHeight() 获取第一个匹配元素内部区域高度(包括补白、不包括边框)。
    $("p").innerHeight();

    innerWidth() 获取第一个匹配元素内部区域宽度(包括补白、不包括边框)。
    $("p").innerWidth();

    outerHeight() 获取第一个匹配元素外部高度(默认包括补白和边框)。
    $("p").outerHeight();

    outerWidth() 获取第一个匹配元素外部宽度(默认包括补白和边框)。
    $("p").outerWidth();


    offset 获取匹配元素在当前文档的相对偏移。
    $("#box").offset().left;
    $("#box").offset().top;

    position 获取匹配元素相对父元素的偏移。(有定位时)
    $("#box").position().left;
    $("#box").position().top;

    scrollTop 获取匹配元素相对滚动条顶部的偏移。
    $("p").scrollTop();

    scrollLeft 获取匹配元素相对滚动条左侧的偏移。
    $("p").scrollLeft();

  • 相关阅读:
    调用GOOGLE的TTS实现文字转语音(XE7+小米2)(XE10.1+小米5)
    Android实例-设置消息提醒(XE8+小米2)
    FastReport二维码打印存在的问题
    一个DELPHI操作USB摄像头类
    利用Delphi编程控制摄像头(图)
    Delphi实现拍照控件的程序代码
    win dos命令行设置ip和dns
    daemontools管理fast-fail的zookeeper
    zookeeper定时清理log
    生成所有全排列 非递归和递归实现
  • 原文地址:https://www.cnblogs.com/liyi-wutong/p/7646166.html
Copyright © 2020-2023  润新知