Question

我在我的JS函数中创建了这个按钮，这样每次有人点击我的HTML按钮时，它都会输出文本输入：

$("#new-item").on('click', function() {
    var text = $('#task').val();    
    $('#list').prepend("<li>" + text + " " + "<button class='started'>Started</button>" + "</li>" + "</br>");
});

这个想法来自here。

现在我想在我的CSS文件中设置按钮的样式，但我的代码不会改变任何内容。

这是我在css中所做的：

.started {font-size: 10px;}

HTML代码：

</head>
<body>
        <header>
            <a href="https://trello.com"></a>
        </header>

        <section>

            <input type="text" id="task">

            <button id="new-item"> Add a card </button>

            <div class="column" id="to-do">
                <h1> To Do </h1>
                <li id="list"></li>
            </div>

            <div class="column" id="doing">
                <h1> Doing </h1>
            </div>

        </section>
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="_js/main.js"> </script>
</body>

Answer 1

对我来说很好。我改变的唯一事情是id="started"而不是class="started"，因为id应该始终是唯一的

$("#new-item").on('click', function() {
  var text = $('#task').val();

  $('#list').prepend("<li>" + text + " <button class='started'>Started</button></li></br>");
});

.started {
  font-size: 10px;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <a href="https://trello.com">Trello</a>
</header>

<section>

  <input type="text" id="task">

  <button id="new-item"> Add a card </button>

  <div class="column" id="to-do">
    <h1> To Do </h1>
    <li id="list"></li>
  </div>

  <div class="column" id="doing">
    <h1> Doing </h1>
  </div>

</section>

Answer 2

要更改按钮样式，请使用此代码

button.started {font-size: 10px;}

在JS中动态创建时的CSS样式

2 个答案: