设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › getBoundingClientRect返回值全为0
返回列表 发新帖
查看: 2145|回复: 1

[已解决]getBoundingClientRect返回值全为0

[复制链接]
李万金
发表于 2022-5-11 23:03:40 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
本帖最后由 李万金 于 2022-5-11 23:08 编辑

<li>的getBoundingClientRect返回值全为0（打印在console界面），但它明显不在左上角。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Follow Along Nav</title>
  6.   <style>
  7.     html {
  8.       box-sizing: border-box;
  9.       font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
  10.     }

  12.     *,
  13.     *:before,
  14.     *:after {
  15.       box-sizing: inherit;
  16.     }

  18.     body {
  19.       margin: 0;
  20.       min-height: 100vh;
  21.       background:
  22.         linear-gradient(45deg, hsla(340, 100%, 55%, 1) 0%, hsla(340, 100%, 55%, 0) 70%),
  23.         linear-gradient(135deg, hsla(225, 95%, 50%, 1) 10%, hsla(225, 95%, 50%, 0) 80%),
  24.         linear-gradient(225deg, hsla(140, 90%, 50%, 1) 10%, hsla(140, 90%, 50%, 0) 80%),
  25.         linear-gradient(315deg, hsla(35, 95%, 55%, 1) 100%, hsla(35, 95%, 55%, 0) 70%);
  26.     }

  28.     h2 {
  29.       margin-top: 0;
  30.       padding-top: .8em;
  31.     }

  33.     nav {
  34.       position: relative;
  35.       perspective: 600px;
  36.     }

  38.     .cool>li>a {
  39.       color: yellow;
  40.       text-decoration: none;
  41.       font-size: 20px;
  42.       background: rgba(0, 0, 0, 0.2);
  43.       padding: 10px 20px;
  44.       display: inline-block;
  45.       margin: 20px;
  46.       border-radius: 5px;
  47.     }

  49.     nav ul {
  50.       list-style: none;
  51.       margin: 0;
  52.       padding: 0;
  53.       display: flex;
  54.       justify-content: center;
  55.     }

  57.     .cool>li {
  58.       position: relative;
  59.       display: flex;
  60.       justify-content: center;
  61.     }

  63.     .dropdown {
  64.       opacity: 0;
  65.       position: absolute;
  66.       overflow: hidden;
  67.       padding: 20px;
  68.       top: -20px;
  69.       border-radius: 2px;
  70.       transition: all 0.5s;
  71.       transform: translateY(100px);
  72.       will-change: opacity;
  73.       display: none;
  74.     }

  76.     .trigger-enter .dropdown {
  77.       display: block;
  78.     }

  80.     .trigger-enter-active .dropdown {
  81.       opacity: 1;
  82.     }

  84.     .dropdownBackground {
  85.       width: 100px;
  86.       height: 100px;
  87.       position: absolute;
  88.       background: #fff;
  89.       border-radius: 4px;
  90.       box-shadow: 0 50px 100px rgba(50, 50, 93, .1), 0 15px 35px rgba(50, 50, 93, .15), 0 5px 15px rgba(0, 0, 0, .1);
  91.       transition: all 0.3s, opacity 0.1s, transform 0.2s;
  92.       transform-origin: 50% 0;
  93.       display: flex;
  94.       justify-content: center;
  95.       opacity: 0;
  96.     }

  98.     .dropdownBackground.open {
  99.       opacity: 1;
  100.     }

  102.     .arrow {
  103.       position: absolute;
  104.       width: 20px;
  105.       height: 20px;
  106.       display: block;
  107.       background: white;
  108.       transform: translateY(-50%) rotate(45deg);
  109.     }

  111.     .bio {
  112.       min-width: 500px;
  113.       display: flex;
  114.       justify-content: center;
  115.       align-items: center;
  116.       line-height: 1.7;
  117.     }

  119.     .bio img {
  120.       float: left;
  121.       margin-right: 20px;
  122.     }

  124.     .courses {
  125.       min-width: 300px;
  126.     }

  128.     .courses li {
  129.       padding: 10px 0;
  130.       display: block;
  131.       border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  132.     }

  134.     .dropdown a {
  135.       text-decoration: none;
  136.       color: #ffc600;
  137.     }

  139.     a.button {
  140.       background: black;
  141.       display: block;
  142.       padding: 10px;
  143.       color: white;
  144.       margin-bottom: 10px;
  145.     }

  147.     /* Matches Twitter, TWITTER, twitter, tWitter, TWiTTeR... */
  148.     .button[href*=twitter] {
  149.       background: #019FE9;
  150.     }

  152.     .button[href*=facebook] {
  153.       background: #3B5998;
  154.     }

  156.     .button[href*=courses] {
  157.       background: #ffc600;
  158.     }
  159.   </style>
  160. </head>
  161. <body>
  162.   <h2>Cool</h2>
  163.   <nav class="top">
  164.     <div class="dropdownBackground">
  165.       <span class="arrow"></span>
  166.     </div>

  168.     <ul class="cool">
  169.       <li>
  170.         <a href="#">About Me</a>
  171.         <div class="dropdown dropdown1">
  172.           <div class="bio">
  173.             <img src="https://logo.clearbit.com/wesbos.com">
  174.             <p>Wes Bos sure does love web development. He teaches things like JavaScript, CSS and BBQ. Wait. BBQ isn't part of web development. It should be though!</p>
  175.           </div>
  176.         </div>
  177.       </li>
  178.       <li>
  179.         <a href="#">Courses</a>
  180.         <ul class="dropdown courses"  >   
  181.           <li class="why">
  182.             <span class="code">RFB</span>
  183.             <a href="https://ReactForBeginners.com">React For Beginners</a>
  184.           </li>
  185.           <li>
  186.             <span class="code">ES6</span>
  187.             <a href="https://ES6.io">ES6 For Everyone</a>
  188.           </li>
  189.           <li>
  190.             <span class="code">NODE</span>
  191.             <a href="https://LearnNode.com">Learn Node</a>
  192.           </li>
  193.           <li>
  194.             <span class="code">STPU</span>
  195.             <a href="https://SublimeTextBook.com">Sublime Text Power User</a>
  196.           </li>
  197.           <li>
  198.             <span class="code">WTF</span>
  199.             <a href="http://Flexbox.io">What The Flexbox?!</a>
  200.           </li>
  201.           <li>
  202.             <span class="code">GRID</span>
  203.             <a href="https://CSSGrid.io">CSS Grid</a>
  204.           </li>
  205.           <li>
  206.             <span class="code">LRX</span>
  207.             <a href="http://LearnRedux.com">Learn Redux</a>
  208.           </li>
  209.           <li>
  210.             <span class="code">CLPU</span>
  211.             <a href="http://CommandLinePowerUser.com">Command Line Power User</a>
  212.           </li>
  213.           <li>
  214.             <span class="code">MMD</span>
  215.             <a href="http://MasteringMarkdown.com">Mastering Markdown</a>
  216.           </li>
  217.         </ul>
  218.       </li>
  219.       <li>
  220.         <a href="#">Other Links</a>
  221.         <ul class="dropdown dropdown3">
  222.           <li><a class="button" href="http://twitter.com/wesbos">Twitter</a></li>
  223.           <li><a class="button" href="http://facebook.com/wesbos.developer">Facebook</a></li>
  224.           <li><a class="button" href="http://wesbos.com">Blog</a></li>
  225.           <li><a class="button" href="http://wesbos.com/courses">Course Catalog</a></li>
  226.         </ul>
  227.       </li>
  228.     </ul>
  229.   </nav>



  233. <script>
  234.   const whyLabel = document.querySelector('.why')
  235.   positionOfWhyLabel = whyLabel.getBoundingClientRect();
  236.   console.log(positionOfWhyLabel);
  237. </script>

  239. </body>
  240. </html>
复制代码
最佳答案
月排行榜 / 总排行榜
艺术生
2022-5-25 21:04:10
你的<li>元素都显示不出来，当然为0.
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

艺术生
发表于 2022-5-25 21:04:10 | 显示全部楼层    本楼为最佳答案   
你的<li>元素都显示不出来，当然为0.
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-4-18 18:15

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表