javascript - Jquery change text and css for part of text - Stack Overflow

admin管理员组

文章数量:1324615

To simplify, I have a label set in my html as:

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

On an event I am changing the lext of lblApptDateTime to Appointment with an asterisk. I want the asterisk to be red color and in bold font. How do i achieve that ?

Here's what I am changing the text on the event:

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

Need to change the color of asterisk to red and in bold font.

To simplify, I have a label set in my html as:

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

On an event I am changing the lext of lblApptDateTime to Appointment with an asterisk. I want the asterisk to be red color and in bold font. How do i achieve that ?

Here's what I am changing the text on the event:

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

Need to change the color of asterisk to red and in bold font.

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Sep 15, 2015 at 19:22 HereToLearn_HereToLearn_ 1,18044 gold badges2626 silver badges4949 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

You can add the asterisk in an :after pseudo-element. This way you can style it to your liking, apart from the text.

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

In your JavaScript, instead of adding the asterisk inside the label, you just add the class asterisk to it:

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

You can also use toggleClass() instead of addClass() if the asterisk should be toggle-able.

Here's a working fiddle. Since I didn't have any other event available, I used hover.

Wrap it in a span and use a class

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

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

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

HTML:

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

CSS:

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

You'll need to put it in a new styled element like a span, which you can do with append:

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

Or addClass() instead of using css() and style it appropriately.

本文标签： javascriptJquery change text and css for part of textStack Overflow