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);

而且，我们现在可以轻松更改颜色。这也适用于其他值。这是一个很棒的article

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 个答案: