【分享】JEECG在线开发online js增强变更控件属性

场景

最近在使用JEECG的低代码平台，通常额外的一些功能可以通过JS增强来实现，特别像补丁增强器，粘在上面时，程序会自动加入到运行代码上。分享下js结合online-js增强的一个小例子。

---

问题描述

昨天同事有个需求，想要改变指定字段的背景色和文字大小等样式。但是这里的页面应该是默认套用的模板，所以使用的系统默认样式，如果我希望指定部门字段变更红色背景色，我该如何实现呢？

---

思路分析：

1、分析可实现方式：

通过检查代码发现，每一个input程序都自定义好了一个id:form_item_dept,且Background为白色，
如果能通过// 获取 input 元素的ID ，就能对这个id单独的增添属性啦！

2、js获取ID方式：

const inputElement = document.getElementById('myInputID'); 

3、js增加控件style样式，属性方式

• 通过 style 属性直接修改

// 修改样式
inputElement.style.backgroundColor = 'lightblue'; // 背景色
inputElement.style.fontSize = '20px'; // 字体大小
inputElement.style.margin = '10px'; // 外边距

• 使用 setAttribute 方法

// 使用 setAttribute 设置样式
inputElement.setAttribute('style', 'color: red; border: 1px solid black;');

• 添加多个样式

如果需要添加多个样式，可以循环或使用对象来批量设置样式：

javascript

var styles = {
    backgroundColor: 'yellow',
    textAlign: 'center',
    padding: '15px'
};

for (var property in styles) {
    element.style[property] = styles[property];
}

题外话：js除了直接增加属性样式，还可以触发修改属性

这里贴下AI提供的方式方法，觉得还是涨知识了~~~

---

解决方案：

1、最终使用方式：

选择JS增强，并在form类型下编写loaded事件

2、具体代码：

以上，今日分享到此结束啦~~~~~~