js如何获取居中对齐的inline-block元素,到页面正中间的距离?

young8704
  • 263
广东

js如何获取居中对齐的inline-block元素,到页面正中间的距离?
话不多说,看代码。

div_title下面有很多个span,span数量不是固定的

   <div id="div_container">
        <div id="div_title">
            <span>生</span>
            <span>日</span>
            <span>快</span>
            <span>乐</span>
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
        </div>
    </div>

以下是css样式,div_title设置了文字居中对齐,span是inline-block

        #div_title {
            position: absolute;
            left: 50px;
            top: 200px;
            width: 400px;
            color: black;
            text-align: center;
            font-weight: 700;
            font-size: 32px;
        }
        #div_title span {
            display: inline-block;
        }

页面效果就像下面这样

问题:如何获取每个span到页面正中间的距离?
我感觉难点是,因为span数量不固定,所以span的间距也不是固定的,而且中文字体和英文字体宽度也不一样。
无法获取offsetLeft,因为span不是绝对定位。

补充下,出现这个问题是因为,我想做css动画animation,想让每个span文字从页面底部正中间 飞到 上图中标题的位置。 上图中标题的位置就是每个span的终点,起点就是页面底部正中间。所以我需要计算 终点和起点之间的距离,从而得到animation所需的translate-x和translate-y。
translate-y容易,直接弄大一点,弄到页面外即可,反正也看不出来。
translate-x就不知道怎么搞了,所以就出现 了这个问题。

回复
阅读 703
1 个回答
✓ 已被采纳

调用元素的getBoundingClientRect方法可以获取到元素在屏幕中的位置,每个元素算一下,相对位置一目了然。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏