JS修改E9字段普通字段以及特殊字段的颜色

JS修改字段颜色

有些时候需要在流程里面对于某些特定的字段进行高亮或者变色凸显，这个时候就需要用到JS代码来进行调整了。如果是需要批量修改字段颜色的话，可以将逻辑抽出来集成一个方法，这样的话后面只需要传字段ID就可以了

function changeColor(before,after){
  console.log("进入方法changeColor---")
  
    var valueBefore = WfForm.getFieldValue(before);
    var valueAfter = WfForm.getFieldValue(after);
    if((valueAfter != "" || valueBefore != "") && valueBefore != valueAfter){
      // alert("变更前变更后值不同")
        console.log("before---",before)
        console.log("after---",after)
        document.getElementById(after+"span").style.color="red";
    }
}

上面的这个只是简单的对一些文本类型的字段进行改色，对有些字段是不起作用的

如何看对哪些字段起作用呢？

这个时候就需要用到F12调出浏览器的开发者工具了

这样的字段一般都是起效的

那么那种字段是不能通过这种方式来获取的呢？

一般日期选择器，或者浏览字段以及多文本字段都不能直接通过拼接span来实现的，可以也通过上面的方式进行查看

这里看到字段的class标签以及其中的内容与普通的文本标识是不一样的，所以这个时候可以通过一个通用的方法来进行文字的变色处理

function changeLi(before,after){
    console.log("进入变色方法")
    var valueBefore = WfForm.getFieldValue(before);
    var valueAfter = WfForm.getFieldValue(after);
    console.log(valueBefore)
    console.log(valueAfter)
    if((valueAfter != "" || valueBefore != "") && valueBefore != valueAfter){
      console.log("before---",before)
      console.log("after---",after)
      var dom = jQuery(`.${after}_swapDiv`).closest("td");//这里是指找到对应最近的一个td元素，也就是这个字段所在的单元格
      if (dom.length > 0) {
            // 在找到的 td 元素内部查找所有的div元素，并将它们的文字颜色设置为红色
            dom.find("div").css("color", "red");
        }
    }
  }

按照这种方式就能将单元格里面的文字变色了，这个方法是通用的方法，重点在于
jQuery(`.${after}_swapDiv`).closest("td")这里指定了class，这里的after是传的字段id

重点在于类选择器需要指定字段id，因为字段id是唯一标识的。

这个不仅仅可以用于变色处理，无论是你想要加粗还是添加背景色都可以这样，只要能找到对应的标签即可进行相应的css操作