m0_58595582 2021-07-20 21:03 采纳率: 50%
浏览 24
已采纳

JavaScript能否获取元素的整体形状？

问题是：JavaScript能否获取元素的整体形状？
比如
1.在屏幕上的坐标，比如起始和/或结束的x轴和y轴
2.元素的圆角，比如设置了border-radius
3.元素的宽度和高度

  • 写回答

1条回答 默认 最新

  • li.siyuan 2021-07-20 21:19
    关注

    你那三个比如 都可以获取到

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #test {
        background-color: red;
        width: 100px;
        border: 2px solid;
        border-radius: 25px;
    }
  </style>
</head>
<body>
<div>元素1</div>
<div id="test">元素2</div>

<script>
  window.onload = function () {
      const test = document.getElementById('test');
      const style = window.getComputedStyle(test, null);
      console.log("Y坐标", test.offsetTop)
      console.log("X坐标", test.offsetLeft)

      console.log("border-bottom-left-radius", style["border-bottom-left-radius"])
      console.log("border-bottom-right-radius", style["border-bottom-right-radius"])
      console.log("border-end-end-radius", style["border-end-end-radius"])
      console.log("border-end-start-radius", style["border-end-start-radius"])

      console.log("宽度", style.width)
      console.log("高度", style.height)
  }
</script>
</body>
</html>

    写代码不易 请采纳

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

  • javascript 获取元素位置的快速方法 getBoundingClientRect()
    2020-10-29 14:02
    在JavaScript中，获取元素在网页中的精确位置是一个常见的需求，特别是在进行动态布局或者交互式设计时。`getBoundingClientRect()`方法是实现这一目标的有效途径。这个方法返回一个对象，该对象包含了关于元素几何...
  • javascript tab标签 不规则TAB选项卡效果源码
    2022-05-18 11:42
    JavaScript是一种广泛应用于网页和网络应用开发的脚本语言，它主要负责...通过这个源码包，开发者不仅可以学习到如何创建不规则的Tab选项卡效果，还能深入了解JavaScript在前端开发中的实际应用，提升自己的编程技能。
  • 前端Javascript、Vue、CSS等场景面试题目（二）
    2024-11-16 14:38
    FE_Jinger的博客 前端面试场景题目：Vue|HTML|CSS|JAVASCRIPT|WEBPACK
  • 前端表白页面代码[源码]
    2025-11-23 09:22
    该页面的设计风格简洁明了，不带有过于复杂的元素和效果，使得用户能够快速聚焦于主要的表达内容。页面的这种设计取向，既保证了信息的有效传达，又保证了页面加载的快速和流畅。这样的前端页面非常适合用于个人表白...
  • 前端课程设计-仓库管理系统（html+css+js）.zip
    2023-06-05 23:53
    此外，AJAX（Asynchronous JavaScript and XML）技术可能被用于在不刷新整个页面的情况下，向服务器发送请求并获取数据，实现数据的增删查改功能。 文件名称“仓库管理系统页面设计3-20”可能代表项目包含多个HTML...
  • Web前端入门第 64 问：JavaScript 几种函数定义方式有什么区别？
    2025-06-30 09:38
    姜很犟的博客 函数作为 JS 语言中的一等公民，几种声明方式区别是面试中的常客，经常被问及箭头函数与function有...02-282.Web前端入门第2问：前端开发是什么？与后端、全栈的区别是什么？一个完整的Web项目有哪些角色参与？02-28。
  • 前端利用bpmn-js实现工作流
    2022-01-25 11:39
    在本文中，我们将深入探讨如何在前端环境中利用BPMN-js库实现工作流。BPMN-js是一个基于JavaScript的开源库，它允许开发者在Web应用中可视化和交互处理Business Process Model and Notation（业务流程模型与符号）...
  • Web前端入门第 70 问：JavaScript DOM 节点查找常用方法
    2025-07-20 09:39
    廷哥带你小路超车的博客 常用的 DOM 查找方法基本就这些，还有些不太常用的方法本文就不一一列举，有兴趣可以查看 MDN 文档。原创作者: linx转载于: https://www.cnblogs.com/linx/p/189474261.Web前端入门第1问：英语是否很重要？有哪些...
  • Web前端入门第 60 问：JavaScript 各种数组定义与数组取值方法
    2025-07-19 23:48
    王寶釧的博客 JS 的数组花样很多，不像其他强类型语言中的...// 字面量定义数组// 空数组// 包含元素const arr5 = Array(1, 2, 3) // 与 new Array 一样，获取 [1, 2, 3]const arr6 = new Array(5) // [空属性 × 5] 数组长度为 5。
  • javaScript操作元素(9个案例+代码+效果)
    2024-10-07 14:38
    程序蓄的博客 js中操作元素的常用操作，innerHtml,innerText,textContext,style属性,className属性，classList属性，img属性,Attribute属性,data*-属性。案例:使用innerHTML修改文本内容 案例:data属性的简单操作;案例:修改我的...
  • 没有解决我的问题, 去提问

问题事件

  • 已采纳回答 7月22日
  • 修改了问题 7月20日
  • 创建了问题 7月20日