Jquery更改文本和部分文本的CSS

Question

为简化起见，我在html中设置了一个标签：

 <label id ="lblApptDateTime" >Appointment</label>

在一个事件中，我正在使用星号将lblApptDateTime的lext更改为Appointment。我希望星号是红色和粗体字。我如何实现这一目标？

以下是我正在更改活动文本的内容：

  $("#lblApptDateTime").html("Appointment" + "*");

需要将星号的颜色更改为红色和粗体字体。

Answer 1

您可以在:after伪元素中添加星号。这样，您可以根据自己的喜好设计样式。

.asterisk:after {
    content: '*';
    color: red;
}

在JavaScript中，您只需在标签中添加星号，而不是在其中添加星号asterisk：

$("#lblApptDateTime").html("Appointment").addClass("asterisk");

如果星号应该可以切换，您也可以使用toggleClass()代替addClass()。

这里是working fiddle。由于我没有任何其他活动，我使用了hover。

Answer 2

将其包裹在一个范围内并使用一个类

$("#lblApptDateTime").html('Appointment' + '<span class="red">*</span>');

.red {
  color: red;
  font-weight: bold
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<label id="lblApptDateTime">Appointment</label>

Answer 3

您需要将它放在像span这样的新样式元素中，您可以使用append执行此操作：

$("#lblApptDateTime").append($("<span>").css("color", "red").text("*"));

或addClass()而非使用css()并对其进行适当设置。

Answer 4

HTML：

$("#lblApptDateTime").html("Appointment" + "<span class="red">*</span>");

CSS：

span.red {
  color: red;
  font-weight: bold;
}