Как покрасить текст элемента?

Question

Мне нужно, если текст offline, то он красный, если online, то зеленый. у меня код:

function drawFriends(friends) {

    var html = '<p class="friends">' + 'Ваши друзья:' +'</p>';

    for (var i = 0; i < friends.length; i++) {
        var f = friends[i];  
        var element = document.getElementsByTagName("p");
        var online = f.online ? 'Online' : 'offline';


        html +=
             '<a href="#">'
                +'<img src="'+f.photo_100+'" align="top" />'
                +'<div class="info">'
                    +'<h4>' + f.first_name + ' ' + f.last_name + '</h4>'
                    +'<p>'+online+'</p>'
                    +'<button data-id="'+f.id+'" class="open-detail">Открыть</button>'
                    +'</div>'
            +'</a>'
            +'</li>';
    }

    $('ul').html(html);
}

Answer 1

Ваш код не оч. хорош. но в пока под него: Надо создать специальный класс в CSS и описать его там и потом при генерировании html его так же добавлять по условию как вы делали ранее var online = f.online ? 'Online' : 'offline';

function drawFriends(friends) {

    var html = '<p class="friends">' + 'Ваши друзья:' +'</p>';

    for (var i = 0; i < friends.length; i++) {
        var f = friends[i];  
        var element = document.getElementsByTagName("p");
        var online = f.online ? 'Online' : 'offline';
        let isOnlineClass = f.online ? 'is-online' : 'is-offline';


        html +=
             '<a href="#">'
                +'<img src="'+f.photo_100+'" align="top" />'
                +'<div class="info">'
                    +'<h4>' + f.first_name + ' ' + f.last_name + '</h4>'
                    +'<p class="' + isOnlineClass + '">'+online+'</p>'
                    +'<button data-id="'+f.id+'" class="open-detail">Открыть</button>'
                    +'</div>'
            +'</a>'
            +'</li>';
    }

    $('ul').html(html);
}

.is-online { 
  color: green;
}

.is-offline { 
  color: red;
}

И с помощью шаблонных строк, сделать чуть полегче для восприятия

function drawFriends(friends) {

    let html = '<p class="friends">Ваши друзья:</p>';

    for (var i = 0; i < friends.length; i++) {
        let f = friends[i];  
        let element = document.getElementsByTagName("p");
        let online = f.online ? 'Online' : 'offline';
        let isOnlineClass = f.online ? 'is-online' : 'is-offline';
        
        html +=
             `<li>
             <a href="#">'
                <img src="${f.photo_100}" align="top" />
                <div class="info">
                    <h4>${f.first_name + ' ' + f.last_name}</h4>
                    <p class="${isOnlineClass}">${online}</p>
                    <button data-id="${f.id}" class="open-detail">Открыть</button>
                    </div>'
            </a>
            </li>`;
    }

    $('ul').html(html);
}

.is-online { 
  color: green;
}

.is-offline { 
  color: red;
}

Answer 2

С помощью добавления класса:

function drawFriends(friends) {

    var html = '<p class="friends">' + 'Ваши друзья:' +'</p>';

    for (var i = 0; i < friends.length; i++) {
        var f = friends[i];  
        var element = document.getElementsByTagName("p");
        var online = f.online ? 'Online' : 'offline';
        
        let onlineClass = online === 'Online' ? 'green' : 'red';

        html +=
             '<a href="#">'
                +'<img src="'+f.photo_100+'" align="top" />'
                +'<div class="info">'
                    +'<h4>' + f.first_name + ' ' + f.last_name + '</h4>'
                    +'<p class=' + onlineClass + '>'+online+'</p>'
                    +'<button data-id="'+f.id+'" class="open-detail">Открыть</button>'
                    +'</div>'
            +'</a>'
            +'</li>';
    }

    $('ul').html(html);
}

.green {
  color: green;
}

.red {
  color: red;
}

БЛОГ НА HUSL

Как покрасить текст элемента?

Ответы (2 шт):