更改文本字体的颜色
[英]Changing colour of the text font
问题描述
I am trying to create a text font colour drop down button where it gives you an option of multiple colour to pick from and then it would change the colour of the text.
我正在尝试创建一个文本字体颜色下拉按钮，它为您提供多种颜色的选项供您选择，然后它会更改文本的颜色。 I am not sure on how to approach this and I am not meant to use jQuery.我不确定如何解决这个问题，我不打算使用 jQuery。 Any help would be appreciated.任何帮助，将不胜感激。 In the code below it shows other examples of other button where they change the user input entered into the contenteditable.在下面的代码中，它显示了其他按钮的其他示例，它们更改了输入到 contenteditable 中的用户输入。 I want the font colour button to do the same but just change the colour of the text我想让字体颜色按钮做同样的事情，但只是改变文本的颜色
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>
2 个解决方案
解决方案1
2 已采纳 2019-12-10 23:23:07
First off we will use a CSS variable.首先，我们将使用一个CSS变量。 Lets declare a value at :root让我们在:root处声明一个值
:root {
--font-color: #000;
}
Now we will use that value to style the font color of our P tags.现在我们将使用该值来设置P标签的字体颜色。
p {
color: var(--font-color);
}
Now when somebody clicks one of the color names, we want to change the value of --font-color .现在，当有人单击颜色名称之一时，我们要更改--font-color的值。 (Notice we are using the data- attribute model to store the color we want to change too). （请注意，我们也使用data-属性模型来存储我们想要更改的颜色）。
document.documentElement.style.setProperty('--font-color', target.dataset.color);
And presto we can now change color easily.现在我们可以很容易地改变颜色。 This works for other values also.这也适用于其他值。 Here is a greatarticle这是一篇很棒的文章
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>
解决方案2
0 2019-12-10 23:26:09
You can manipulate the style variable:您可以操作样式变量：
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.