JS初始化按钮颜色，点击后变色
1. 概述
我们知道，利用控件CSS或按钮CSS可以修改整个模板中某种控件的CSS样式，即使这里面没有你需要的，现在基本所有新的浏览器都有调试功能，按F12,找到控件相应的CSS代码，再用JS修改下就行了。
但是在有些需求下，模板中出现多个按钮，而我们需要的并不是仅仅统一修改样式，需要的是在初始化后统一出现一种样式，而点击后出现另一种样式，再次点击后又恢复成原来的样式，这样我们以前所使用的修改CSS样式的方法就不再适用，比如想实现下图中的效果，用统一修改就没办法实现了，那么，如何实现呢？
2. 实现方法
2.1 制作模板
添加内置数据集，如下图所示：
把内置数据集第1列拖动到A1单元格，A2单元格为按钮控件，模板设计如下图所示：
2.2 按钮初始化后的统一样式
修改统一样式比较简单，只需要在模板加载结束后事件里面写修改CSS的代码就行了，比如我们要初始化时显示灰色，打开菜单>模板>模板web属性>填报页面设置，添加加载结束事件，如图所示：
加载结束事件的js代码如下：
$('.fr-btn-up#fr-btn-').each(function(){
if($(this).closest('td').attr('col')=='1')
{
$(this).css('background-color','gray');
}
})
2.3 点击后修改单个按钮的样式
按钮文字为失效时，再点击变成生效，并且背景色变成红色。右击B1单元格，弹出控件设置对话框，添加点击事件，如下图所示：
代码如下：
if(this.getValue()=='失效'){
this.setValue('生效');
this.$btn.closest('#fr-btn-').css('background-color','red');//换背景色
this.$btn.closest('#fr-btn-').css('background-image','url()');//换背景图片，自己填写url地址
} else {
this.setValue('失效');
this.$btn.closest('#fr-btn-').css('background-color','gray');//背景色为灰色
this.$btn.closest('#fr-btn-').css('background-image','url()');//清除背景图片
}
利用此方法同样可以实现其他控件单独变色，并且代码中提供了更换背景图片的功能，只需要填上图片地址就行了。
附件列表
主题： 二次开发
标签：
已验证