如何更改 JavaScript 中單詞的顏色？

Question

我有這個用 OOP 編寫的簡單代碼塊。 我想操縱這句話，以便將最后一個參數（ faveColor ）更改為指定的實際顏色。 我知道我需要編寫某種 function 來做到這一點，但我不知道怎么做。

我真的很困惑如何以最干凈的方式處理 go。 基本上這樣句子就會輸出“你好，我的名字是 John Doe，我最喜歡的顏色是 ${red/orange/blue/green} 等。每個選項的顏色都會變化。

 function Person(fullName, faveColour) {
      this.name = fullName;
      this.favouriteColour = faveColour;
      this.greet = function () {
        return `Hello, my name is ${this.name} and my favourite colour is ${this.favouriteColour}`;
      };
    }

const john = new Person('John Doe', 'red');
john.greet();

const jane = new Person('Jane Doe', 'orange');
jane.greet();

const red = '#ff0000';
const orange = '#ffa500';

Answer 1

我假設您想在某些 HTML 中顯示具有指定顏色的文本。

如果是這種情況，您可以將在 greet 方法中返回的this.favouriteColour包裝在一個跨度中，並添加一個動態樣式。

參考以下：

 function Person(fullName, faveColour) { this.name = fullName; this.favouriteColour = faveColour; this.greet = function () { return ` Hello, my name is ${this.name} and my favourite colour is <span style="color:${faveColour}">${this.favouriteColour}</span>`; }; } const john = new Person('John Doe', 'red'); const jane = new Person('Jane Doe', 'orange'); const red = '#ff0000'; const orange = '#ffa500'; const div1 = document.getElementById("app1"); div1.innerHTML = john.greet() const div2 = document.getElementById("app2"); div2.innerHTML = jane.greet()

 <div id="app1"></div> <div id="app2"></div>