在下面的JSFiddle中如何使文本“生产”颜色为蓝色,其值为绿色,例如!
HTML
<button id="btnProduct" type="button" class="Btns" >
CSS
.Btns {
width:200px;
height:75px;
background-color:lightblue;
color:black;
font-weight:bold;
}
的javascript
$("#btnProduct").html('Production:</br></br>'+55);
答案 0 :(得分:2)
对于具有不同类名的文本,只需使用两个<span>
或<p>
,并在CSS中为该类添加相应的颜色
$("#btnProduct").html('<span class="red">Production:</span></br></br><span class="blue">55</span>');
并在CSS中添加.red
和.blue
答案 1 :(得分:0)
您可以使用跨度并为它们提供不同的样式。 将标记更改为:
$("#btnProduct").html('Production:</br></br>'+<span>55</span>);
然后在css中:
Btn {
color: black;
}
Btn > span {
color: green;
}
答案 2 :(得分:0)
您可以使用<span>
标签,例如Rajan说。但是,如果您不想破坏整数,或允许它动态更改,您可以为第二个范围提供特定的ID,如下所示:
<button id="btnProduct" type="button" class="Btns" >
$("#btnProduct").html('<span id="green">Production:</span><span id="blue" class="myInt">'+55+'</span>');
和CSS
.Btns {
width:200px;
height:75px;
background-color:lightblue;
color:black;
font-weight:bold;
}
#green {
color:green;
}
#blue {
color:blue;
}