Question

我想使用JavaScript更改对象中值的字体颜色。例如，我想更改“ Ciao”的颜色：

     const Quotes = [{Text: "Hello", Author: "Him"},
     {Text: "Goodbye", Author: "Her"},
     {Text: "Ciao", Author: "Me"}]

我尝试做其他同学所做的事情，即在对象中添加颜色键：

     const Quotes = [{Text: "Hello", Author: "Him"},
     {Text: "Goodbye", Author: "Her"},
     {Text: "Ciao", Author: "Me", "color":"red"}]

这是我的代码：

<body onload="RenderQuote(0)">
  <section class="full-page x-center-y-center-column">
     <div id="quote-block" class="quote"></div>
     <div id="author-block" class="author"></div>
     <div class="navigation-buttons">
        <button onclick="RandomQuote()">Random</button>
     </div>            
  </section>
  <script>
     let CurrentQuoteIndex = 0;
     const Quotes = [
        { Text:"Apparently there is nothing that cannot happen today.", Author:"Mark Twain" },
        { Text:"The world's most famous and popular language is music.", Author:"Henri de Toulouse-Lautrec" },
        { Text:"Life is like riding a bicycle.<br>To keep your balance you must <b>keep moving</b>.", Author:"Albert Einstein" },
        { Text:"Life is a marathon, know when to take a break.", Author:"My Name" },
        { Text:"Take care of yourself as if you're taking care of someone else.", Author:"My Name" },
        { Text:"Remember to take your pills.", Author:"My Name" }
     ]
     RandomQuote = () => {
        CurrentQuoteIndex = Math.floor(Math.random() * (Quotes.length));
        RenderQuote(CurrentQuoteIndex);
     }
     RenderQuote = (QuoteIndex) => {
        let Quote = document.getElementById("quote-block");
        let Author = document.getElementById("author-block");

        Quote.innerHTML = Quotes[QuoteIndex].Text;

        Author.innerHTML = Quotes[QuoteIndex].Author;

     }
  </script>

Answer 1

您可以像这样设置颜色Quote.style.color = 'rgb(244,123,234)'

<body onload="RenderQuote(0)">
  <section class="full-page x-center-y-center-column">
     <div id="quote-block" class="quote"></div>
     <div id="author-block" class="author"></div>
     <div class="navigation-buttons">
        <button onclick="RandomQuote()">Random</button>
     </div>            
  </section>
  <script>
     let CurrentQuoteIndex = 0;
     const Quotes = [
        { Text:"Apparently there is nothing that cannot happen today.", Author:"Mark Twain" },
        { Text:"The world's most famous and popular language is music.", Author:"Henri de Toulouse-Lautrec" },
        { Text:"Life is like riding a bicycle.<br>To keep your balance you must <b>keep moving</b>.", Author:"Albert Einstein" },
        { Text:"Life is a marathon, know when to take a break.", Author:"My Name" },
        { Text:"Take care of yourself as if you're taking care of someone else.", Author:"My Name" },
        { Text:"Remember to take your pills.", Author:"My Name" }
     ]
     RandomQuote = () => {
        CurrentQuoteIndex = Math.floor(Math.random() * (Quotes.length));
        RenderQuote(CurrentQuoteIndex);
     }
     RenderQuote = (QuoteIndex) => {
        let Quote = document.getElementById("quote-block");
        let Author = document.getElementById("author-block");
        let authorName = Quotes[QuoteIndex].Author;
        
        
        Quote.innerHTML = Quotes[QuoteIndex].Text;
        if(authorName=='My Name') {
            Quote.style.color = `red`;
        } else {
            Quote.style.color = `black`;
        }

        Author.innerHTML = authorName;

     }
  </script>

Answer 2

呈现引号时，您需要设置style属性。例如：

RenderQuote = (QuoteIndex) => {
        let Quote = document.getElementById("quote-block");
        let Author = document.getElementById("author-block");
        let authorName = Quotes[QuoteIndex].Author;


        Quote.innerHTML = Quotes[QuoteIndex].Text;
        // set quote texts color
        Quote.style.color = Quotes[QuoteIndex].color || 'black';

        Author.innerHTML = authorName;

     }

如果Quotes[QuoteIndex]具有属性color，它将设置颜色。否则，它将文本颜色设置为black。

现在此对象的最后一个引用：

 const Quotes = [{Text: "Hello", Author: "Him"},
 {Text: "Goodbye", Author: "Her"},
 {Text: "Ciao", Author: "Me", color:"red"}]

将具有颜色red

Answer 3

一种方法是为每个作者设置CSS类，然后仅应用与作者姓名匹配的类（减去空格，因为类名称不能包含空格）。

此外，您正在使用Pascal Case（即PascalCase）作为变量名，这违反了JavaScript中的约定。唯一应该使用Pascal Case的情况是使用constructor functions的名称，以使其他人知道应该使用new关键字来调用这些功能。所有大写字母经常（但不是必需）使用常量名称，但除此之外，应使用驼峰式大写字母（camelCase）作为标识符。

此外，请勿使用内联HTML事件属性。 bunch of reasons有一种不使用这种已有20多年历史的技术，而且这种技术不会消失。而是将所有JavaScript都与HTML分开工作。

document.querySelector("button").addEventListener("click", randomQuote);

let currentQuoteIndex = 0;
const quotes = [
  { text:"Apparently there is nothing that cannot happen today.", author:"Mark Twain" },
  { text:"The world's most famous and popular language is music.", author:"Henri de Toulouse-Lautrec" },
  { text:"Life is like riding a bicycle.<br>To keep your balance you must <b>keep moving</b>.", author:"Albert Einstein" },
  { text:"Life is a marathon, know when to take a break.", author:"My Name" },
  { text:"Take care of yourself as if you're taking care of someone else.", author:"My Name" },
  { text:"Remember to take your pills.", author:"My Name" }
];
 
function randomQuote(){
  currentQuoteIndex = Math.floor(Math.random() * (quotes.length));
  renderQuote(currentQuoteIndex);
}

function renderQuote(quoteIndex){
  let quote = document.getElementById("quote-block");
  let author = document.getElementById("author-block");
  
  quote.classList = "quote";    // Reset the class list
  
  // Replace spaces in the author name with nothing and use that resulting
  // string as the class name to apply to the <div> that is the quote
  quote.classList.add(quotes[quoteIndex].author.replace(/\s+/g, ""));
  
  quote.innerHTML = quotes[quoteIndex].text;
  author.innerHTML = quotes[quoteIndex].author;
}

button { margin:10px 0; }
.quote { font-size:1.5em; font-weight:bold; }
.author { font-style:italic; margin-left:15px; }

/* Each author's name becomes a CSS class and each gets a color. */  
.AlbertEinstein { color: green; }
.HenrideToulouse-Lautrec { color: blue; }
.MarkTwain { color: orange; }
.MyName { color: purple; }

<section class="full-page x-center-y-center-column">
  <div class="navigation-buttons">
    <button>Random</button>
  </div>   
  <div id="quote-block" class="quote"></div>
  <div id="author-block" class="author"></div>
</section>

如何更改对象中特定值的字体颜色？

3 个答案: