Styling jQuery script output

user_6598666 0
Viewed 60

So here’s the code 

 <script>
function get_price(){
        var price_margin = 0.00174;
        jQuery.get("https://min-    api.cryptocompare.com/data/price?    fsym=XRP&tsyms=USD").then(function(data){
        jQuery('#xrp_price').text(function(price){
            return "PRICE " + data["USD"].toFixed(5);
        });
    .......

That returns a value 0.45678 for e.g but I’d like to make the last 3 digits really small so just the 0.45 stands out. I have tried changing the .text to .html and adding or but that just makes the whole value bold and not the last 3 digits. Hmmmmmm (scratches chin). All help is greatly appreciated

css html jquery javascript
1 Answers

Instead set .text set .html

and set the 3 first chars in span with class='bold'

and the other chars get by use data.toFixed(5).slice(3) and set another class='small'

then style in css according classes in html

    var data=0.45678 ;
    $('#xrp_price').html(function(price){
        return "PRICE <span class='bold'>" + data.toFixed(2) + "</span> <span class='small'>"+ data.toFixed(5).slice(3) + "</span>";
    });
.bold{
  font-weight: bold;
}
.small{
font-size:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="xrp_price"></div>

EDIT: You can use <small> DOM instead <span class='small'>

user_91407400
Related