制作仿网易云音乐移动端的时候遇到的问题“offsetTop is not defined“

W_4ever

于 2022-06-04 21:41:25 发布

阅读量296

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/W_4ever/article/details/125126073

版权

JavaScript offsetTop 错误修复歌词凸显 DOM元素

关键词由CSDN通过智能技术生成

有一些歌曲，点击进入弹出层页面时，会报错“offsetTop is not defined”，因为我们是根据p标签距离父组件顶部的偏移量来实现歌词凸显

用watch监听歌曲的时间来实现

currentTime() {
      let p = document.querySelector(".now_music_word");
        if (p.offsetTop > 241) {
          this.$refs.lyricbox.scrollTop = p.offsetTop - 241;
        }
    },

有一些歌曲在这个时候会报offsetTop is not defined
检查发现有一些歌曲的p标签dom元素获取不到，是一个空值
解决方案

currentTime() {
      let p = document.querySelector(".now_music_word");
      // 先判断p标签的dom元素是不是为空 如果不是为空的话 在进行对凸显歌词的距离判断
      if (p != null) {
        if (p.offsetTop > 241) {
          this.$refs.lyricbox.scrollTop = p.offsetTop - 241;
        }
      }
    },