JS实现改变选中sheet字体颜色

1. 概述
1.1 问题描述

目前多 sheet 切换，sheet 标签的字体颜色大小均无法设置，当前选中的 sheet 标签显示不够明显。我们想要下面这种清晰看出来选中的 sheet 的效果的话，可以通过 JS 进行设置。

1.2 实现思路

给模板设置加载结束事件改变被选中 sheet 标签的颜色

2. 示例

点击菜单模板>模板 Web 属性>填报预览设置，选择“为该模板单独设置”，添加一个“加载结束”事件，如下图：

2.1 sheet 标签显示位置在下方

编辑加载结束事件，添加下面的 JS 代码：

1. $('.fr-sheetbutton-container-active .fr-sheetbutton-middlepart').css('color', 'red');  
   
2. $('.fr-sheetbutton-container').bind('click', function() {  
   
3.     $('.fr-sheetbutton-container-active .fr-sheetbutton-middlepart').css('color', 'red');  
   
4.     $('.fr-sheetbutton-container:not(.fr-sheetbutton-container-active) .fr-sheetbutton-middlepart').css('color', 'black');  
   
5. });
   
6. JS 代码说明：
   
7. 
   
8. $('.fr-sheetbutton-container-active .fr-sheetbutton-middlepart').css('color', 'red');   //改变选中的 sheet 标签字体颜色为红色
   
9. 
   
10. $('.fr-sheetbutton-container').bind('click', function() {}   //获取 sheet 切换点击事件
    
11. 
    
12. $('.fr-sheetbutton-container:not(.fr-sheetbutton-container-active) .fr-sheetbutton-middlepart').css('color', 'black');  //将其他未选中的sheet标签字体颜色改为黑色

复制代码

保存模板，点击填报预览即可查看效果，选中的sheet的字体会变为红色，如下图：

2.2 sheet 标签显示位置在上方

JS 代码修改为：

1. $('.fr-sheetbutton-container-active .fr-sheetbutton-middlepart-top').css('color', 'red');  
   
2. $('.fr-sheetbutton-container').bind('click', function() {  
   
3.     $('.fr-sheetbutton-container-active .fr-sheetbutton-middlepart-top').css('color', 'red');  
   
4.     $('.fr-sheetbutton-container:not(.fr-sheetbutton-container-active) .fr-sheetbutton-middlepart-top').css('color', 'black');  
   
5. });

复制代码

2.3 预览效果

保存模板，选择填报预览，实现效果下图所示：

注：此 JS 不支持移动端使用

3. 模板下载

模板效果在线查看请点击：JS 实现改变选中sheet字体颜色 .cpt

已完成的模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\23-JS实现改变选中sheet字体颜色 .cpt

点击下载模板：23-JS实现改变选中sheet字体颜色 .cpt

能同时修改字体颜色和大小吗，怎么写呢