如何使用JavaScript為Fontawesome圖標着色？

Question

我有以下fa-icon ：

<div id="notification">
    <div id="info">
        <div class="service">
            <i class="fas fa-music"></i>
            <h1 class="name"></h1>
        </div>
    </div>
</div>

我嘗試了以下方法以javascript為其着色：

var Music = (swatches.DarkVibrant.getHex());
document.getElementById("info").getElementsByClassName("service")[0].style.color = Music;

// Gave i element this id
document.querySelector('#music').style.color = Music;
document.querySelector('.fas fa-music').style.color = Music;

但是它們都不起作用，我怎么能做到這一點？

編輯：好像它只在我的函數外部起作用，為什么當它在我的函數內部不起作用？

// Works
document.querySelector('.fas').style.color = "blue"

function mainUpdate(type) {
    if (type == "music") {
        if (isplaying) {
            document.querySelector('.name').innerHTML = "Now playing";
            document.querySelector('.details').innerHTML = "• " + album;
            document.querySelector('.song').innerHTML = title;
            document.querySelector('.artist').innerHTML = artist;
            var milli = new Date().getMilliseconds();
            var albumart = document.querySelector("#artworkImage");
            albumart.src = "/var/mobile/Documents/Artwork.jpg?" + milli;
            albumart.addEventListener('load', function () {
                var vibrant = new Vibrant(albumart);
                var swatches = vibrant.swatches()
                for (var swatch in swatches)
                    if (swatches.hasOwnProperty(swatch) && swatches[swatch]) {
                        var Name = (swatches.DarkVibrant.getHex());
                        var Music = (swatches.DarkVibrant.getHex());
                    }
                document.querySelector('.name').style.color = Name; // Works
                document.querySelector('.fas').style.color = "blue" // Doesnt work
            });
        }
    }
}

Answer 1

由於5.0使用SVG請嘗試

document.querySelector('.fas fa-music').style.fill = Music;

如果這不起作用，則必須在其中選擇SVG並在其中應用規則

Answer 2

做類似的事情

document.querySelector('.fa.fa-sign-in').style.color = "green"

您的選擇器有誤。 對於您的情況，修改樣式的正確行將是

document.querySelector('.fas.fa-music').style.color = "green"

將“綠色”更改為您的顏色

Answer 3

您是否嘗試了以下代碼？

document.querySelector('#info .service .fa-music').style.color = Music;

這個也應該起作用：

document.querySelector('.fas.fa-music').style.color = Music;

您似乎通過編寫('.fas fa-music')犯了一個小錯誤。