Question

当使用Javascript将其嵌套在按钮元素内时，我在更改span类时遇到问题。

我试图让它看起来像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';
}

Answer 1

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

相反，选择按钮的.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>

根据需要调整更新的元素。不确定你想要去哪里的东西。

Answer 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';
}

Answer 3

斜视提供的答案并不遥远，但不正确。我不得不改变它。的上一页

// 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来找到它。

使用Javascript更改嵌套的Span类

3 个答案: