获取 HTML 元素的位置坐标

获取 HTML 元素的位置坐标，可以使用 JavaScript 中的 DOM 操作来实现。下面是一个示例代码，展示如何使用 JavaScript 获取指定类名的元素的位置坐标：

htmlCopy code
<!DOCTYPE html>
<html>
<body>
  <div class="my-element">This is a div element.</div>

  <script>
    // 获取具有指定类名的元素
    var element = document.querySelector('.my-element');

    // 获取元素的位置信息
    var rect = element.getBoundingClientRect();

    // 输出元素的位置坐标
    console.log('元素的左上角坐标：', rect.left, rect.top);
    console.log('元素的右下角坐标：', rect.right, rect.bottom);
    console.log('元素的宽度和高度：', rect.width, rect.height);
  </script>
</body>
</html>

在上述代码中，我们首先使用 querySelector() 方法获取具有指定类名 .my-element 的元素。然后，使用 getBoundingClientRect() 方法获取该元素的位置信息，返回一个包含左上角坐标、右下角坐标、宽度和高度等属性的 DOMRect 对象。

最后，我们使用 console.log() 方法将元素的位置坐标输出到控制台。您可以根据实际需要使用这些坐标信息。

请注意，获取的位置坐标是相对于视口（viewport）的坐标，而不是相对于整个页面的坐标。如果需要获取相对于页面的坐标，可以结合 window.scrollX 和 window.scrollY 属性进行计算。

辑导语：前段时间，有很多博主因为IP属地问题“翻车”，而是否展示IP属地也引发了广大网友的讨论。为什么各大平台突然集体展示账号IP属地？这项功能有什么意义？本篇文章中，作者给出了答案，我们一起来看看吧。

最近，各大平台网站陆续公开了账号IP属地。对于这项新的政策，网上主流观点都持支持态度。为什么突然间各大平台网站很有默契的同时开发且执行了公开账号IP属地这项功能，这对产品设计工作会有怎样的影响，在这里一站式分享与你。

一、关于展示IP地址的相关规定

关于IP属地展示，最早提出是为了网络言论的实名化，即通过展示言论属地IP来对不良网络言论行为进行威慑，达到清朗网络环境的目的。

所以国家互联网信息办公室在2010年10月提出《互联网用户账号名称信息管理规定（征求意见稿）》，其中十二条明确规定：

“互联网用户账号服务平台应当以显著方式，在互联网用户账号信息页面展示账号IP地址属地信息。境内互联网用户账号IP地址属地信息需标注到省（区、市），境外账号IP地址属地信息需标注到国家（地区）。”

但这里需要注意，这是一个征求意见稿，所以并不是本次执行的法规依据。

通俗地讲就是问问大家意见，这样规定行不行，如果觉得不行那再修改修改。

虽然不是执行文件，但是也表达了国家对IP展示方案的意向。

而此次各大平台突然开发展示账户IP属地的真正原因是今年4月中央网信办开展的“清朗·网络暴力专项治理行动”

总而言之，目前并未有强制的法规要求平台系统对账号做地域展示，目前的展示主要也是用于响应国家关于网络环境的相关号召，或者是一种试运行状态。

二、我们为什么需要了解

既然没有要求，那知道这些对我们是否还有意义？

1. 只是一个高曝光的知识点

既然主流的内容平台都已经上线此功能，那么在各种需求会议上和日常工作交流中就有可能会被不经意地提及。

虽然不是复杂的需求，但也是需求，是需求就需要处理。

而全面了解此功能的背景与现状是我们从容应对需求的基础，同时也能表现自己的产品全面性与专业性，因为功能小，所以容易因扩展的回答制造惊喜。

2. 这是一个风险点，而且可能是法律风险点

不知道大家是否有这样的经历，在规划产品或者项目的时候，难免会遇到一道填空题，一道关于风险的填空题。

填的太真实，影响项目立项或者推进，填的太敷衍，容易被diss说没经验；假如选择抄取前辈的“答案”，又担心前辈变成评审会的参与方。

而现在就有一个现成的答案，既能政治正确又没啥成本。

3. 这是一个小成本功能点

说到成本，我想为了各项合规而开发的功能中，展示IP是相对成本小的一个功能，甚至大部分系统的会员数据里面本来就拥有IP数据，甚至还有定位数据，而且还不用改变业务流程。

小成本功能是能很好地增加产品的灵活性。

4. 这是未来的趋势

关于网络环境治理，只会越来越规范。

关于IP属地展示规定的试水，目前的主流观点是持支持态度，所以大概率我们还是会迎来需要强制展示IP归属地的那一天，就像现在的域名备案一样成为常态化硬性要求。

三、产品设计需要注意的事项

1. 当前的主流设计

我整理了、知乎、贴吧、小红书和快手的功能对比，总结下来主要是在三个位置做IP属地的展示，分别是【作者主页】、【文章页】、【评论区】，详细情况我已分别对上述各个平台做了截图介绍。

同样是展示功能，各个平台对于展示这件事的解释有各自的理解：

头条和知乎没发现常态化对用户的解释型功能
贴吧和快手对IP展示的数据做出了解释，主要针对的是数据不准确的这种情况，解决方案是需要用户联系客服进行沟通
小红书做的则特别小心，明确弹窗说明增加IP属地展示是为了维护网络安全且数据来源于运营商，是目前我能找到解释最全面的，从原因和数据准确性两个维度都对用户做了常态化的解释。

2. 数据逻辑

IP属地展示的数据源是来自于系统对用户发生行为的时候获取的IP地址数据进行展示，所以主要分为两种：

（1）博主IP

博主IP位置数据：根据账号注册时的IP属地进行存储展示，即在博主注册但未发表作品的状态下展示对应的IP位置，后期根据发布作品时的IP位置做对应的统计得出博主IP位置。主要参考的逻辑是在设定的时间段内作品发布时的IP统计和注册IP属地加权计算取值。

（2）作品和评论IP

用户作品和评论的IP来源则是根据发布时的实际IP地址归属获取并展示。

3. 展示位置与样式设计思路

（1）博主IP

关于博主IP，目前看下来大家主要是以完成功能为主，但是值得参考的是快手的实践。

快手将用户自己设置的地址与IP地址结合，在主页面是展示省份+城市。

但是这个数据其实是博主自己设置的数据，点击进去则会展示IP地址与博主自己设置的地址。

正常情况下用户查看时两个数据是对应的，如果有不诚实的情况，则也暴露的很明显。而且其他的平台主要还是在博主信息区对地址做展示。

（2）作品IP

目前看到的所有的作品详情页关于IP地址的展示都是不明显的，但是这很合理，因为用户进来看的是内容又不是定位信息。

对于文章类的就两个思路，一种是在文章头部展示，另一种是在文章尾部做展示，基本做到页面和谐即可。

（3）评论IP

关于评论IP属地的展示，各个平台的展示思路高度一致，在原来页面展示评论时间的后面直接追加对应的IP属地，省力又和谐。

4. 其他

IP属地的展示深度只能到省份级别，直辖市则展示城市名。

用户解释文案：

“IP属地以运营商信息为准，如果有问题可咨询客服”；
“为维护网络安全、保障良好生态和社区的真实性，根据网络运营商数据，展示用户IP属地信息”。

四、写在最后

截止至我发文的时间，IP属地展示功能了解即可，如果未来刚好遇到的真的要上这个功能，那希望也能为你提供一点点帮助。

参考资料：

1、中央网信办：http://www.cac.gov.cn/2022-04/24/c_1652422681278782.html

2、国家互联网信息办公室官网：http://www.cac.gov.cn/2021-10/26/c_1636843202454310.html

本文由 @瑞见钉锤原创发布于人人都是产品经理，未经许可，禁止转载。

题图来自 Unsplash，基于CC0协议

天要学习的是CSS，CSS是什么？

CSS指的是层叠样式表，它和HTML是一对好朋友，可以对HTML网页进行修饰。

为什么要学CSS？

要想让浏览器显示以下内容：

以我们所学的知识，就需要一个一个的去添加 font 样式：

键盘的TAB可以缩进，代码看起来更美观

非常麻烦，一个网页可能有几百个样式要设置，难道一个一个的去添加吗？即使你很有耐心，这么多的样式全写在一个页面（CSS会新建一个专门存放样式的页面），别说别人了，自己看了都觉得乱。

为了省时省力、简洁易改、维护方便、增强网页……

所以，引入CSS样式表，就是为了解决这些问题。

第一步

在盘符下面建立一个文件夹，在文件夹里面建立两个文档：

例如，我在C盘下面建立了文件夹 new_20200831，在这个文件夹里面在建立两个文本文档，并修改扩展名：new.html 和 newcss.css

之所以放在同一个文件夹里面，是为了更好管理和方便链接，下面的 [1] 会解释为什么方便链接。

打开new.html ，输入基础html代码：

在<head></head>中写入下方代码：

<link href="css 文件的路径" type="text/css" rel="stylesheet" />

href：规定被链接文档的位置。 [1]

type：规定被链接文档的类型。这里指定为 “text/css” 表示链接的外部文件为CSS样式表。

rel：规定当前文档与被链接文档之间的关系。这里指定为 “stylesheet” 表示链接的文档是一个样式表文件

——————————————————————————————

[1] 我来解释一下为什么放在同一个文件夹会方便链接：

引用的路径分为两种：

绝对路径：完整描述文件路径

相对路径：相对于当前文件的路径，不带有盘符。(推荐）

相对路径分为以下3种：

· 文件和html文件位于同一文件夹；只需输入文件名即可，如<link href="new.css" />

· 文件位于html文件的下一级文件夹；输入文件夹和文件名，之间用 / 隔开，如 <link href="new_20200831/new.css" />

· 文件位于html文件的上一级文件夹；在文件名之前输入 ../ ，如果是上两级，则需要用 ../../ 以此类推，如 <link href="../new.css" />

例如，上面我输入href="new.css" 就是相对路径的第1种情况，我放在同一个文件夹，所以只要输入文件名 new.css 即可，而不是输入绝对路径 C/new_20200831/new.css ,明显后者麻烦多了。

未完待续~

在线咨询

上一篇：JavaScript奇淫技巧：20行代码，实现屏幕录像
下一篇：js实现html转码去标签与解码还原

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商