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

时间:2018-03-12 22:19:08

标签: css

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

3 个答案:

答案 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;
}

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