使用 Javascript 更改嵌套跨度类答案

【问题标题】：Change Nested Span class using Javascript使用 Javascript 更改嵌套跨度类
【发布时间】：2016-05-11 20:05:31
【问题描述】：

当跨度类嵌套在使用 Javascript 的按钮元素内时，我在更改跨度类时遇到问题。

我试图让它看起来像这样 http://www.bootply.com/128062# 并且我已经验证了 CSS 的工作原理。

HTML

<button id="submitbutton" class="btn btn-primary btn-lg" type="submit" onclick="onclickFunction();">
    <span id ="submit_span" class=""></span> Submit</button>

JavaScript

function onclickFunction() {
    document.getElementById('submitbutton').className = 'btn btn-lg btn-warning';
    document.getElementById('submitbutton').innerHTML = 'Loading...';
    document.getElementById('submit_span').className = 'glyphicon glyphicon-refresh glyphicon-refresh-animate';
}

【问题讨论】：

标签： javascript html css twitter-bootstrap

【解决方案1】：

当您写入按钮的.innerHTML 时，您正在破坏<span> 元素。

改为选择按钮的.lastChild，并更新其.data（假设这是您想要文本的位置）。

function onclickFunction() {
    document.getElementById('submitbutton').className = 'btn btn-lg btn-warning';
    document.getElementById('submitbutton').lastChild.data = 'Loading...';
    document.getElementById('submit_span').className = 'glyphicon glyphicon-refresh glyphicon-refresh-animate';
}

如果您只是将this 传递给函数，您的代码会更短更简洁。

function onclickFunction(btn) {
  // The button element
  btn.className = 'btn btn-lg btn-warning';

  // The last text node in the button
  btn.lastChild.data = 'Loading...';

  // The first element (span) in the button
  btn.firstElementChild.className = 'glyphicon glyphicon-refresh glyphicon-refresh-animate';
}

.btn.btn-lg.btn-warning {
  background: orange
}

.glyphicon {
  padding: 10px;
  background: red;
  }

<button onclick="onclickFunction(this);" id="submitbutton" class="btn btn-primary btn-lg" type="submit">
  <span id="submit_span" class="">x</span> Submit
</button>

根据需要调整更新的元素。不确定您期望的确切位置。

【讨论】：

我已经尝试了这两种解决方案，但我仍然遇到同样的问题
@user3263650：我把我的第二个例子变成了一个工作演示，虽然我把btn.firstChild改成了btn.firstElementChild，因为我忘记了<span>之前的空格。点击按钮有效。

【解决方案2】：

正确的顺序应该是这样的：

function onclickFunction() {
    document.getElementById('submitbutton').className = 'btn btn-lg btn-warning';
    document.getElementById('submit_span').innerHTML = 'Loading...';
    document.getElementById('submit_span').className = 'glyphicon glyphicon-refresh glyphicon-refresh-animate';
}

【讨论】：

【解决方案3】：

squint 提供的答案离我们不远，但并不正确。我也不得不改变它。 上一个

// The first element (span) in the button

btn.firstChild.className = 'glyphicon glyphicon-refresh glyphicon-refresh-animate';

之后

btn.firstElementChild.className = 'glyphicon glyphicon-refresh glyphicon-refresh-animate';

我通过进入 chrome，检查元素，检查 DOM 属性，展开控制台中的按钮，你会看到 firstElementChild。

【讨论】：