时间戳

首页 > 解决方案 > 如何根据文本类型更改 JavaScript 中已编辑任务的颜色？

javascript - 如何根据文本类型更改 JavaScript 中已编辑任务的颜色？

问题描述

目前，代码无法正常运行。如果文本仅更改为“杂货店”一词，则文本不会变成蓝色。任何编辑都会将任务背景变为粉红色。我怎样才能为这个功能增加更多的变化，即如果文本包含单词 Grocery 或 Milk 等，它将被编辑为蓝色。或者，如果文本中只有 Grocery 或 Milk 这个词，它会变成蓝色。或者可以通过编辑任务进行的任何其他颜色更改。

//dynamic colour edit task
function change(){
var text=document.getElementById("div").innerHTML;
if(text=="A"){
    document.getElementById('div').style.backgroundColor=("blue");
    }
else{
document.getElementById('div').style.backgroundColor=("pink");};
/*can add similar code*/

};

标签： javascripthtml

解决方案

在数组中设置所有关键字。div如果文本使用循环与内容匹配，则检查数组中的值。

var keys = ["Milk", "Grocery"]
change(keys);

function change(keys) {
  keys.some(function(value, index, _arr) {
    var text = document.getElementById("div").innerHTML;

    if (text.indexOf(value) > -1) {
      document.getElementById('div').style.backgroundColor = ("blue");
      return value === value;
    } else {
      document.getElementById('div').style.backgroundColor = ("pink");
    };
    /*can add similar code*/

  });

};
<div id='div'>Milk</div>

笔记：

  1. 更改div内容以查看在 div 上应用的不同颜色。

  2. 用于toLowerCase()区分大小写。

推荐阅读