繁体   English   中英

更改文本字体的颜色

[英]Changing colour of the text font

我正在尝试创建一个文本字体颜色下拉按钮,它为您提供多种颜色的选项供您选择,然后它会更改文本的颜色。 我不确定如何解决这个问题,我不打算使用 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>

首先,我们将使用一个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>

您可以操作样式变量:

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

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM