zoukankan      html  css  js  c++  java
  • 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();

  • 相关阅读:
    基于Text-CNN模型的中文文本分类实战 流川枫 发表于AI星球订阅
    SQL Server 定时执行SQL语句的方法
    linq 根据指定条件返回集合中不重复的元素
    asp.net mvc ChildActionOnly 和ActionName的用法
    C# 让枚举返回字符串
    EF中使用SQL语句或存储过程
    Sql Server系列:视图
    C# 获取web.config配置文件
    C# 在EF中直接运行SQL命令
    c# mvc 获取 HtmlHelper 表达式值和时间格式化 去边框
  • 原文地址:https://www.cnblogs.com/liyi-wutong/p/7646166.html
Copyright © 2011-2022 走看看