Changing colour of the text font

Question

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. 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. 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>

Answer 1

First off we will use a CSS variable. Lets declare a value at :root

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

Now we will use that value to style the font color of our P tags.

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

Now when somebody clicks one of the color names, we want to change the value of --font-color . (Notice we are using the data- attribute model to store the color we want to change too).

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>

Answer 2

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>

Changing colour of the text font

Question

2 answers

solution1
2 ACCPTED 2019-12-10 23:23:07

solution2
0 2019-12-10 23:26:09

Changing colour of the text font

Question

2 answers

solution1 2 ACCPTED 2019-12-10 23:23:07

solution2 0 2019-12-10 23:26:09

solution1
2 ACCPTED 2019-12-10 23:23:07

solution2
0 2019-12-10 23:26:09