更改文本字體的顏色

Question

我正在嘗試創建一個文本字體顏色下拉按鈕，它為您提供多種顏色的選項供您選擇，然后它會更改文本的顏色。 我不確定如何解決這個問題，我不打算使用 jQuery。 任何幫助，將不勝感激。 在下面的代碼中，它顯示了其他按鈕的其他示例，它們更改了輸入到 contenteditable 中的用戶輸入。 我想讓字體顏色按鈕做同樣的事情，但只是改變文本的顏色

 const TAB_KEY = 9; const ENTER_KEY = 13; const SHIFT_KEY = 16 const editor = document.querySelector('.editor'); editor.appendChild(document.createElement('li')); editor.addEventListener('keydown', (e) => { let code = e.keyCode || e.which; if (code == TAB_KEY) { e.preventDefault(); let parent = e.target; let ul = document.createElement('ul'); let li = document.createElement('li'); ul.appendChild(li); parent.appendChild(ul); moveCursorToEnd(li); } else if (code == ENTER_KEY) { e.preventDefault(); let parent = e.target; let li = document.createElement('li'); parent.appendChild(li); moveCursorToEnd(li); } else if (code == TAB_KEY * TAB_KEY){ e.preventDefault(); let parent = e.target; let ol = document.createElement('ol'); let li = document.createElement('li'); ol.appendChild(li); parent.appendChild(ol); moveCursorToEnd(li); } }); function moveCursorToEnd(el) { el.focus(); document.execCommand('selectAll', false, null); document.getSelection().collapseToEnd(); } /*editor.addEventListener('click', (x) => { x = document.getElementById("b"); if(x.style.fontWeight == "bolder"){ x.style.fontWeight = "normal"; } else { x.style.fontWeight = "bolder"; } });*/ function bold(){ if(document.execCommand("bold")){ document.execCommand("normal"); }else{ document.execCommand("bold"); } } /*function underline(){ let x = document.getElementById("text"); if(x.style.textDecoration == "underline"){ x.style.textDecoration = "none"; }else{ x.style.textDecoration = "underline"; } }*/ function underline(){ if(document.execCommand("underline")){ document.execCommand("none"); }else{ document.execCommand("underline"); } } /*Turns the font of the text to Italic*/ function italic(){ if(document.execCommand("italic")){ document.execCommand("normal"); }else{ document.execCommand("italic"); } } function highlighSelectedText(){ let sel = window.getSelection().getRangeAt(0); let selText = sel.extractContents(); let span = document.createElement("span"); span.style.backgroundColor = "yellow"; span.appendChild(selText); sel.insertNode(span); } /*function printPage(){ let printButton = document.getElementById("ul"); printButton.style.visibility = 'hidden'; window.print(); printButton.style.visibility = 'visible'; }*/

 body{ margin-top:1em; margin-bottom: 10em; margin-right: 1em; margin-left: 1em; border: solid; border-color: #0033cc; background-color: #f6f6f6; } div button{ padding: 1em 2em; color: white; background-color: #0000cc; } div input{ padding: 1em 2em; color: white; background-color: #0000cc; } div{ list-style-type:square; list-style-position: inside; margin-left: 0.25em; margin-bottom: 5em; } section { padding: 1em 2em; color: white; background-color: #0000cc; } .editor { font-weight: normal; } div contenteditable{ margin-bottom: 10em; }

 <!DOCTYPE html> <meta charset="utf-8"> <body> <head> <title>Outliner</title> <link href="style.css" rel="stylesheet" title="Style"> <div> <button id="b" onclick="bold()"> B </button> <button onclick="underline()"> U </button> <button onclick="italic()"> I </button> <input type="button" onclick="highlighSelectedText()" value="Highlight"/> <div id="text" class="editor" contenteditable="true" draggable="true"></div> </div> <section> <input id="saveAs"></input> <button onclick="saveTextFile()">Download</button> <input type="file" id="load"/> <button onclick="loadFile()">Load</button> </section> <section> <button class="btn btn-primary" onclick="saveChanges()">Save Text</button> <button class="btn btn-warning" onclick="clearStorage()">Reset</button> </section> </head> <script type= "text/javascript" src='setting.js'></script> </body>

Answer 1

首先，我們將使用一個CSS變量。 讓我們在:root處聲明一個值

:root {
  --font-color: #000;
}

現在我們將使用該值來設置P標簽的字體顏色。

p {
  color: var(--font-color);
}

現在，當有人單擊顏色名稱之一時，我們要更改--font-color的值。 （請注意，我們也使用data-屬性模型來存儲我們想要更改的顏色）。

document.documentElement.style.setProperty('--font-color', target.dataset.color);

現在我們可以很容易地改變顏色。 這也適用於其他值。 這是一篇很棒的文章

 document.addEventListener('click', ({ target }) => { if(target.matches('p')) { document.documentElement.style.setProperty('--font-color', target.dataset.color); } });

 :root { --font-color: #000; } p { width: 30%; border: 2px solid #00000030; border-radius: 7px; margin: 0.25rem; padding: 0.25rem; color: var(--font-color); }

 <h2>Click a color</h2> <p data-color="#f00">Red</p> <p data-color="#0f0">Green</p> <p data-color="#00f">Blue</p> <p data-color="#000">Reset</p>

Answer 2

您可以操作樣式變量：

<div id="text">
    Choose a color
</div>
<input id="color" type="color">
<button onclick="document.getElementById('text').style.color = document.getElementById('color').value;">Change Color</button>

更改文本字體的顏色

問題描述

2 個解決方案

解決方案1
2 已采納 2019-12-10 23:23:07

解決方案2
0 2019-12-10 23:26:09

更改文本字體的顏色

問題描述

2 個解決方案

解決方案1 2 已采納 2019-12-10 23:23:07

解決方案2 0 2019-12-10 23:26:09

解決方案1
2 已采納 2019-12-10 23:23:07

解決方案2
0 2019-12-10 23:26:09