首页 > 软件开发 > HTML >

怎么获取元素到页面的距离

来源:互联网 2023-03-16 19:15:59 220

怎么获取元素到页面的距离,在开发的时候,页面会有许多元素,而这些元素都有HTML的标签组成,我们添加样式的时候有时候需要计算距离来核算出应该添加的样式大小,这样就会规范很多。DXs办公区 - 实用经验教程分享!

怎么获取元素到页面的距离DXs办公区 - 实用经验教程分享!

工具/原料

  • chrome浏览器
  • sublime text3

方法/步骤

  • 1

    打开sublime text3,也可以用其他编辑器,这里新建一个HTML文档作为示范。DXs办公区 - 实用经验教程分享!

    怎么获取元素到页面的距离DXs办公区 - 实用经验教程分享!

  • 2

    我们这里要创建一下HTML文档的基本架构。DXs办公区 - 实用经验教程分享!

    怎么获取元素到页面的距离DXs办公区 - 实用经验教程分享!

  • 3

    这里我们设置多个标签,这样等会可以有更多选择。DXs办公区 - 实用经验教程分享!

    怎么获取元素到页面的距离DXs办公区 - 实用经验教程分享!

    怎么获取元素到页面的距离DXs办公区 - 实用经验教程分享!

  • 4

    创建一个JS文档,并且与HTML文档关联。DXs办公区 - 实用经验教程分享!

    怎么获取元素到页面的距离DXs办公区 - 实用经验教程分享!

  • 5

    var test = document.getElementById(DXs办公区 - 实用经验教程分享!

    "pp").offsetTop;DXs办公区 - 实用经验教程分享!

    DXs办公区 - 实用经验教程分享!

    DXs办公区 - 实用经验教程分享!

    document.write( test );DXs办公区 - 实用经验教程分享!

    我们有offsetTop就能知道元素到顶部的距离DXs办公区 - 实用经验教程分享!

    怎么获取元素到页面的距离DXs办公区 - 实用经验教程分享!

    怎么获取元素到页面的距离DXs办公区 - 实用经验教程分享!

  • 6

    var test = document.getElementById(DXs办公区 - 实用经验教程分享!

    "pp").offsetLeft;DXs办公区 - 实用经验教程分享!

    然后offsetLeft就能知道元素到左边的距离。DXs办公区 - 实用经验教程分享!

    怎么获取元素到页面的距离DXs办公区 - 实用经验教程分享!

    怎么获取元素到页面的距离DXs办公区 - 实用经验教程分享!

  • 6该信息非法爬取自百度经验
  • 注意事项

    • 如果CSS样式修改,边距也会修改

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!DXs办公区 - 实用经验教程分享!


    标签: HTML

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码