时间戳

首页 > 解决方案 > 如何更改对象中特定值的字体颜色？

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

问题描述

我想使用 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>

标签： javascripthtmlcssdom

解决方案

您可以像这样设置颜色，例如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>

推荐阅读