为什么每次单击时显示按钮都会改变样式答案

【问题标题】：Why show button is changing style each time i click it为什么每次单击时显示按钮都会改变样式
【发布时间】：2022-01-24 22:17:13
【问题描述】：

我是 javascript 新手
我正在尝试设置“显示更多”按钮的样式。
我在它下面添加了一个文本和一个向下箭头，但是当我单击它时，显示更少的按钮“我不知道如何设置样式”出现隐藏内容，然后当我再次单击它时，显示更多按钮出现时没有图标或样式。

function toggleText() {
  var showMoreText = document.getElementById("more");
  var buttonText = document.getElementById("moreButton");
  if (startpoint.style.display === "none") {
    showMoreText.style.display = "none";
    startpoint.style.display = "inline";
    buttonText.innerHTML = "Show More";
  } else {
    showMoreText.style.display = "inline";
    startpoint.style.display = "none";
    buttonText.innerHTML = "Show Less";
  }
}

.pink {
  color: #FF7B5F;
}

#more {
  display: none;
}

#moreButton {
  background-color: transparent;
  border-color: transparent;
}

<span id="startpoint"></span>
<span id="more">
    <div class="clients BRANDING col-6 col-md-4 col-lg-3 col-lg-3">
      <a href="#">
        <figure class="filter-container">
          <img class="img-fluid brand-img" src="./images/filter/logo" alt="Logo">
          <figcaption class="product-desc"><P>text</P></figcaption>
          <figcaption class="product-desc2"><h4>text</h4></figcaption>
        </figure>
      </a>
    </div>
  </span>
<button onclick="toggleText()" id="moreButton">
    <p class="pink">Show More</p> 
    <img class="more" src="./images/downarrow" alt="arrow">
  </button>

【问题讨论】：

Div 不是 span 的有效子代。
您正在更改按钮的 innerHTML。但是，该按钮包含其他元素，这些元素在您设置 innerHTML 时会被删除。其中一些已删除的元素是您的按钮的样式。
那么我该如何解决它

标签： javascript css bootstrap-5

【解决方案1】：

因为您在按钮中覆盖了 p 标签。使用这个选择器var buttonText = document.querySelector("#moreButton p"); 这样：

function toggleText() {
  var showMoreText = document.getElementById("more");  
  var buttonText = document.querySelector("#moreButton p");
  
  if (startpoint.style.display === "none") {
    showMoreText.style.display = "none";
    startpoint.style.display = "inline";
    buttonText.innerHTML = "Show More";    
    buttonText.classList.remove('green')
  } else {
    showMoreText.style.display = "inline";
    startpoint.style.display = "none";
    buttonText.innerHTML = "Show Less";
    buttonText.classList.add('green')
  }
}

.pink {
  color: #FF7B5F;
}

#more {
  display: none;
}

#moreButton {
  background-color: transparent;
  border-color: transparent;
}

.green {
  color: green;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<span id="startpoint"></span> 
<span id="more">
    <div class="clients BRANDING col-6 col-md-4 col-lg-3 col-lg-3">
      <a href="#">
        <figure class="filter-container">
          <img class="img-fluid brand-img" src="./images/filter/logo" alt="Logo">
          <figcaption class="product-desc"><P>text</P></figcaption>
          <figcaption class="product-desc2"><h4>text</h4></figcaption>
        </figure>
      </a>
    </div>
  </span>
<button onclick="toggleText()" id="moreButton">
    <p class="pink">Show More</p> 
    <img class="more" src="./images/downarrow" alt="arrow">
  </button>

【讨论】：

非常感谢 Maik，请问我现在如何才能减少节目的风格？
@aliharas 欢迎您！您可以通过类列表更改样式。我更新了我的答案。 buttonText.classList.add('green')和buttonText.classList.remove('green')

【解决方案2】：

请试一试。代码不正确。你一直在跨度内潜水。

function toggleText() {
  var showMoreText = document.getElementById("more");
  var buttonText = document.getElementById("moreButton");
  var arrowBtn = document.getElementById("arrowButton");
  
  if (startpoint.style.display === "none") {
    showMoreText.style.display = "none";
    startpoint.style.display = "inline";
    buttonText.innerHTML = "Show More";
    arrowBtn.style.display = "inline";
  } else {
    showMoreText.style.display = "inline";
    arrowBtn.style.display = "none";
    startpoint.style.display = "none";
    buttonText.innerHTML = "Show Less";
  }
}

.pink {
  color: #FF7B5F;
}

#more {
  display: none;
}

#moreButton {
  background-color: transparent;
  border-color: transparent;
  cursor: pointer
}

<span id="startpoint"></span>
<span id="more">
    <div class="clients BRANDING col-6 col-md-4 col-lg-3 col-lg-3">
      <a href="#">
        <figure class="filter-container">
          <img class="img-fluid brand-img" src="./images/filter/logo" alt="Logo">
          <figcaption class="product-desc"><P>text</P></figcaption>
          <figcaption class="product-desc2"><h4>text</h4></figcaption>
        </figure>
      </a>
    </div>
  </span>
<button onclick="toggleText()">
    <span class="pink" id="moreButton">Show More</span> 
    <img class="more" src="./images/downarrow" alt="arrow" id="arrowButton">
  </button>

【讨论】：

非常感谢 Dindayal