J'ai créé un bouton similaire à "Lire la suite" et lorsque j'appuie dessus, un texte se développe. Lorsque le texte se développe, l'arrière-plan du bouton change et lorsque j'appuie à nouveau sur le bouton pour fermer le texte (par exemple "Lire moins"), l'arrière-plan du bouton revient à son état d'origine. Comment implémenter cette fonction

function myFunction() {
        var dots = document.getElementById("dots");
        var moreText = document.getElementById("more");
        var btnText = document.getElementsByClassName("skillBtn");
      
        if (dots.style.display === "none") {
          dots.style.display = "inline";
          btnText.innerHTML = "阅读更多";
          moreText.style.display = "none";
        } else {
          dots.style.display = "none";
          btnText.innerHTML = "阅读更少";
          moreText.style.display = "inline";
        }
      }

#more {display: none;}

<div align="center"><h1 id="skillsid" style="margin-top:10px ;"> 编程语言 <span id="dots"></span> </h1><span id="more">
    这里写了一些内容
    
    <div align="center"><a href="#skillsid"><button class="skillBtn" onclick="myFunction()" ></button></a></div>