Question

我试图在单击按钮时更改按钮的样式类，但是它的工作方式不起作用。

我需要在JS函数中更改样式/图标，因为单击按钮时我还会做更多的事情。

function generate() {
//// Some stuff
  document.getElementById('btn1').class = 'play icon fa fa-stop';
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 

<div class='container20'>
  <button class='play icon fa fa-play-circle-o' type='button' onclick='generate()' id="btn1">Button</button> 
</div>

Answer 1

class不存在，有className，所以将其替换为className
在onclick中有功能，因此您需要在其中添加()，以便将generate替换为generate()。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
<div class='container20'>
    <button class = 'play icon fa fa-play-circle-o' type = 'button' onclick = 'generate()' id = "btn1">Button</button>     
</div>                      
<div class='container80'>
    <script>            
        function generate() {
            //// Some stuff
            document.getElementById('btn1').className = 'play icon fa fa-stop';
        }
    </script>
</div>

Answer 2

使用className而不是class

document.getElementById('btn1').className = 'play icon fa-stop';

Answer 3

请尝试以下操作：

下面的代码会将3个类添加到已应用于按钮的任何现有类中

document.getElementById('btn1').classList.add('play', 'icon', 'fa-stop');

下面的代码将用播放，图标和停止按钮替换已经添加到按钮的任何现有类

document.getElementById('btn1').className = 'play icon fa-stop';

Answer 4

您可以使用classList删除并添加必要的类，而不必设置className，而必须保留className文本的play icon部分

function generate() {
    const b = document.getElementById('btn1')
    b.classList.remove('fa-play-circle-o`);
    b.classList.add('fa-stop');
}

是的，它的行数更多，但也更加灵活。例如，您可以编写一个采用旧类和新类并在任何地方调用的方法。

function changeClass(element, old, new) {
    element.classList.remove(old);
    element.classList.add(new);
}

此外，由于您正在事件处理程序中运行，因此不必getElementById('btn1')，因为事件是事件。 target 是被单击的按钮。
（在下面）附加一个事件处理程序，而不是使用内联onclick=，并且我添加了背景色，只是为了看到单击按钮的效果。

document.getElementById('btn1')
        .addEventListener('click', function(e) {
            e.target.classList.remove('fa-play-circle-o');
            e.target.classList.add('fa-stop');
        });

button {
    font-weight: bold;
}
button.fa-play-circle-o {
    background-color: lightsalmon;
}
button.fa-stop {
    background-color: lightgreen;
}

<div class="container20">
  <button id="btn1" type="button"
          class="play icon fa-play-circle-o">Button</button> 
</div>

在JavaScript函数中更改HTML按钮的样式

4 个答案: