如何更改對象中特定值的字體顏色？
[英]How do I change the font color of a specific value in an object?
問題描述
我想使用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>
3 個解決方案
解決方案1
0 2019-01-26 22:15:47
您可以像這樣設置顏色，例如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>
解決方案2
0 已采納 2019-01-26 22:52:57
呈現引號時，您需要設置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則將設置color 。 否則，它將文本顏色設置為black 。
現在此對象的最后一個引用：
const Quotes = [{Text: "Hello", Author: "Him"},
{Text: "Goodbye", Author: "Her"},
{Text: "Ciao", Author: "Me", color:"red"}]
將具有red
解決方案3
0 2019-01-26 22:56:19
一種方法是為每個作者設置CSS類，然后僅應用與作者姓名匹配的類（減去空格，因為類名稱不能包含空格）。
另外，您正在使用Pascal Case（即PascalCase）作為變量名，這與JavaScript中的約定不符。 唯一應使用Pascal Case的方法是使用構造函數的名稱，以讓其他人知道應使用new關鍵字調用這些函數。 所有大寫字母經常（但不是必需）使用常量名稱，但除此之外，應使用駝峰式大寫字母（camelCase）作為標識符。
另外，請勿使用內聯HTML事件屬性。 有很多原因不使用這種已有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>
如何更改綁定到 Razor 頁面上模型的特定文本的字體顏色？
[英]How do I change the font color of a specific text bound to a model on a Razor page?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.