Question

在下面的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);

The Example

Answer 1

对于具有不同类名的文本，只需使用两个<span>或<p>，并在CSS中为该类添加相应的颜色

$("#btnProduct").html('<span class="red">Production:</span></br></br><span class="blue">55</span>');

并在CSS中添加.red和.blue

的样式

Answer 2

您可以使用跨度并为它们提供不同的样式。将标记更改为：

$("#btnProduct").html('Production:</br></br>'+<span>55</span>);

然后在css中：

Btn {
 color: black;
}
Btn > span {
 color: green;
}

Answer 3

您可以使用<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;
}

小提琴：https://jsfiddle.net/ps8L9pve/

如何为按钮上的两个不同文本提供两种不同的颜色

3 个答案: